Full Page Background Image with CSS3

Lets look at some of the benefits of using this property.

• Scales image to fit the browser window
• Does not create scroll bars
• Does not have white space beside the image
• Uses only CSS3 to implement, NO javascript

You can now pull this off by using the background-size property with CSS3. You can use this on the html property as follows:

html {
	background: url(images/youimage.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

Browser Support

Firefox 3.6 and later – You will have to use the -moz property for Firefox background-size property.

Safari 4 – You will have to use the -webkit for the support in Safari

Interent Explorer – You can try using the background-size property but you may have to include the following. It all depends on how IE is feeling that day. Thanks Microsoft!:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.yourbackground.jpg',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourbackground.jpg',
 sizingMethod='scale')";

Update: Matt Litherland writes in to say that anyone trying to use the above IE filters and having problems with scrollbars or dead links or whatever else (like Pierre above) should try NOT using them on the html or body element. But instead a fixed position div with 100% width and height.