CSS background image stretch across whole page?

Hello, I know about no-repeat CSS value to not make an image repeate itself, however if the background image is too small it will just leave a blank space. Is there a CSS value that stretches the background image to cover the whole background of the page? Oh I just noticed something after creating this topic, the css attribute for the body resizes the image, however the class that the second background attribute is assigned to doesn't make the image cover the whole page. Meaning that:
Quote:


body {
background: url('/test/img_27.jpg') fixed;
}


Makes the image span across the whole page like I want, but:
Quote:


#page {
background: url('/test/img_28.jpg') fixed;
}


Which is a class that goes in the page repeats the image. How can I have the background image span across that background like it does for the body tag?





Last edited by lexington : 12-17-2008 at 07:55 PM.

Just an update, I managed to get it to work in FireFox by using background-size: 100%; however it still repeats it in Internet Explorer. How can I make it work for IE as well? Thanks!





Last edited by lexington : 12-17-2008 at 08:20 PM.

You may want to try something like this instead;
css:
#background {
position:absolute;
display:block;
z-index:0;
left:0px; right:0px;
top:0px; bottom:0px;
width:100%; height:100%;
}
#bg {
position:absolute;
z-index:0;
left:0px; top:0px;
width:100%;
height:100%;
}
.img1 { background-image:url(yourimage.jpg); }





__________________█ Aquarius Storage - Stop Searching, Start Hosting█ Fast

I tried that it doesn't work. The change I added in my second post worked but not with IE.

Take a look at this page, maybe it will be of some assistance. http://webdesign.about.com/od/css3/f/blfaqbgsize.htm






__________________█ Aquarius Storage - Stop Searching, Start Hosting█ Fast