Stretching background image

Anonymous
December 23, 2011 at 7:39 pm #2726

Is it possible to have a background image to stretch to 100% width/height of the user’s screen resolution?
Anonymous
December 23, 2011 at 8:24 pm #21674
Well, in a CSS3 compliant browser, this will work:
```
background-size: 100%;
```
However, you could also try this:
```
width:100%;

height:100%;
```
steve5000
December 23, 2011 at 8:33 pm #21675

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

Anonymous
December 24, 2011 at 12:22 am #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
December 24, 2011 at 3:15 am #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.
Anonymous
December 24, 2011 at 3:34 am #21678

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

Love it!

Mod

Kenneth John Odle
December 24, 2011 at 5:31 am #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.)