Stretching background image

  • Anonymous

    #2726

    Is it possible to have a background image to stretch to 100% width/height of the user’s screen resolution?

    Josh

    #21674

    Well, in a CSS3 compliant browser, this will work:

    background-size: 100%;

    However, you could also try this:

    width:100%;
    height:100%;

    steve5000

    #21675

    Sorry Josh, still a novice. Would this go in custom css?

    Josh

    #21676

    Yes, you would need to attribute it to whichever class or id you are wanting to “stretch”.

    What is the image you are trying to stretch? Right now, I just see a black background on your site.

    Mod

    Kenneth John Odle

    #21677

    If you go to my main website (which is so beta it’s still alpha): http://www.kjodle.net

    you can choose various stylesheets. Some of them (like Night Sky) use full-size background images. I stretch them out using this code:

    background-attachment: fixed;
    background-size: 100% 100%, auto;
    -o-background-size: 100% 100%, auto;
    -moz-background-size: 100% 100%, auto;
    -webkit-background-size: 100% 100%, auto;

    This works really well. Keep in mind that if somebody has a really wide monitor, the images can appear distorted.

    Also, keep in mind that this doesn’t work in typewriters, toasters, or IE6.

    Josh

    #21678

    Also, keep in mind that this doesn’t work in typewriters, toasters, or IE6.

    Love it!

    Mod

    Kenneth John Odle

    #21679

    I may have left out the most important part: that code goes with the body in the style sheet.

    I don’t think this works in IE7, either. (Interestingly, the latest version of Safari doesn’t handle the theme switcher at all, so +1 to IE on that score.)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!