CSSPLAY

BOXES › CSS3 Background Images - 100% width/height of container

Date : 28th July 2010

For all browsers

A Box with known width and height

A Box with known width and unknown height

A Box with unknown width and unknown height

Information

Having recently ploughed through hundreds of pages on the web looking for information on how to style a background image to be 100% the size of the container using CSS3 and found most did not have the correct information, I thought that I would clarify things here and show how this is actually styled.

The above demonstration will work in Firefox, Safari, Chrome and Opera at the moment, all other browsers will see an actual size background image centered in the containers.

All three of the above boxes use the same styling for the background image and is as follows:

Cascading Style Sheet

.back {
background-image: url(back.jpg);
background-repeat:no-repeat;
background-position:center center;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}

This method can also be applied to the body element and I have a demo of this here https://www.cssplay.co.uk/layouts/background2.html.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.