CSS problem of background image sizing

  • Unknown's avatar
    wackyraces · Member ·

    Hi all,

    I trawled through the CSS forum and haven’t been able to find an answer to this so far.

    I have applied the “Cutline” theme to my blog ( http://wackyraces.wordpress.com )

    And upgraded so that I can edit the CSS. I have successfully added the background image into the very top of the CSS code: 

    body {
background:#fff;
background-image:url('http://wackyraces.files.wordpress.com/2009/07/widerbackground2.png');
color:#333;
font:62.5% Georgia, "Times New Roman", Times, serif;
text-align:center;
}

    I originally sized the image prior to uploading and at home it all looked fine. The problem is when checking on my laptop the next morning the size of the background image is all wrong. I have tried to alter the code so that it automatically fits the image to match the browser window size by adding in some code like this: 

    background-image{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

    but haven’t got it to work so far. If anyone has any advice it would be much appreciated.

    On another note, if anyone has the time to give advice on use of copyrighted images on blogs (i’m not sure but these images probably are) please fire away. It may only be a charity event but we’d like to cover all bases.

    many thanks
    Tom

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    devblog · Member ·

    the size of the background image is all wrong.

    And how wrong is it? I checked your blog and resized my browser window and didn’t seem wrong to me. A screenshot of what you see could help.

    Also, this code is no good:

    body {
background:#fff;
background-image:url('http://wackyraces.files.wordpress.com/2009/07/widerbackground2.png');
color:#333;
font:62.5% Georgia, "Times New Roman", Times, serif;
text-align:center;
}

    Nor is

    background-image{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

    There is no “background-image” selector, so no matter what you put in there, nothing will have any effect.

    Get rid of that one and modify your body selector to this:

    body {
background:#fff url('http://wackyraces.files.wordpress.com/2009/07/widerbackground2.png') 0 0 no-repeat;
color:#333;
font: 62.5% Georgia, "Times New Roman", Times, serif;
text-align:center;
}

    Also, in my opinion, having the font size to 62.5% is too small… it’s recommended that you set it at least to 70%, since a value smaller than that IE may display the text all screwed up.

    HTH

  • Unknown's avatar
    devblog · Member ·

    One more thing, you don’t need the “text-align” property either. I’d recommend you to remove it from your body definition.

  • Unknown's avatar
    thesacredpath · Member ·

    …it’s recommended that you set it at least to 70%, since a value smaller than that IE may display the text all screwed up.

    Now filed away for future reference.

    :-)

  • Unknown's avatar
    wackyraces · Member ·

    thanks devblog, I’ve added your suggestions to my code.

    This is how it looks for me now:
    http://wackyraces.wordpress.com/files/2009/07/1.png

    this is how I’d like it to look no matter the screen size, browser etc:
    http://wackyraces.wordpress.com/files/2009/07/2.png

    with the image stretching/shrinking if I change window size.

    Is there anything I can add to the code

    0 0 no-repeat;

    something like “width:100%” that will do this for me?

    thanks

  • Unknown's avatar
    devblog · Member ·

    TSP,

    Yes, IE tends to display the font a lot smaller than it should. Actually that happens when you set it to something smaller than 75% but I push it to 70% :P

    wackyraces,

    I see. My bad; I, for some reason gave you the code as though it was for the header image. Give me a few minutes and I’ll have something for you. I’ll need to modify other selectors to make it look like you want.

  • Unknown's avatar
    devblog · Member ·

    I didn’t need to modify other selectors as I thought.

    Modify your body selector to this

    body {
background:#FEECC4 url('http://wackyraces.files.wordpress.com/2009/07/widerbackground2.png') top center repeat-y;
color:#333;
font:62.5% Georgia, "Times New Roman", Times, serif;
}

    Let me know if that’s what you wanted.

    Also, a recommendation: modify your #container selector so that it looks like this;

    #container {
margin:15px auto 0;
overflow: hidden;
width:770px;
}

    HTH

  • Unknown's avatar
    wackyraces · Member ·

    Hi,

    Perhaps instead of stretching the image I just need to make sure it is centred and then just live with whitespace either side. So it would look like this:

    I can definitely live with that.

    To acheive that do I need to do something like this:

    swap ” 0 0 no-repeat; “
    with ” center no-repeat; “

    YES that seems to work!

    devblog – thanks for pointing me in the right direction, bit of a CSS noob!

  • Unknown's avatar
    wackyraces · Member ·

    wow – I just saw your follow ups!
    I’ll give those a try too as they might be a better solution.

    cheers!

  • Unknown's avatar
    wackyraces · Member ·

    excellent – “top center repeat-y;”
    worked a treat & I don’t have to live with the white-space after all!

    Just to check what I’ve added:

    does “repeat-y” have the effect of wrapping around from top to bottom?

    also not quite sure what “overflow: hidden;” does to the container selector?

    anyway, problem solved so thanks for all your help.

  • Unknown's avatar
    devblog · Member ·

    You’re welcome.

    does “repeat-y” have the effect of wrapping around from top to bottom?

    yes, it makes the background repeat vertically. Let’s say you wanted it to repeat horizontally, then you would use “repeat-x”.

    also not quite sure what “overflow: hidden;” does to the container selector?

    What it does is that it makes sure the #container element does indeed wrap the “floating” contents/elements of the blog (i.e. elements with a “float: left” property) otherwise, if you removed the “overflow: hidden;” but added a “background: #fff;” property, you would see a small rectangle by the header…. not good. With “overflow: hidden” then the whole “content” of your blog would have a white background.

    HTH.

  • Unknown's avatar
    wackyraces · Member ·

    OK I see, thanks for explanations.

    Hell of a quick service on these forums by the way!

    appreciated.

  • Unknown's avatar
    devblog · Member ·

    Volunteers rock.

  • The topic ‘CSS problem of background image sizing’ is closed to new replies.