CSS3 Background Images - 100% width/height of container

28th July 2010

A Box with known width and height

A Box with known width and height

Caramels caramel tiramisu. Jolly jelly cake fairies. Biscuit roll tiramisu brownie topping. Tart bear claw muffin.


A Box with known width and unknown height

A Box with known width and unknown height

Sugar plum sesame snaps cotton candy chupa chups jelly lemon drops. Gingerbread tiramisu gummies. Sugar plum biscuit chocolate danish icing wypas. Marshmallow dessert lemon drops jelly. Bonbon chocolate sugar candy brownie.

Liquorice tiramisu tootsie roll apple pie pudding bear claw. Halvah chocolate wafer halvah croissant candy candy canes. Candy canes icing chocolate cake muffin brownie.


A Box with unknown width and unknown height

A Box with unknown width and unknown height

Sugar plum sesame snaps cotton candy chupa chups jelly lemon drops.
Gingerbread tiramisu gummies. Sugar plum biscuit chocolate danish icing.
Marshmallow dessert lemon drops jelly work.
Bonbon chocolate candy candy brownie.
Liquorice tiramisu tootsie roll apple pie pudding bear claw.
Chocolate wafer croissant candy candy canes.
Candy canes icing chocolate cake muffin brownie.




stu nicholls - CSS play

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:

.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 http://www.cssplay.co.uk/layouts/background2.html.



Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

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.



Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples

Soft Geometry Creative Industries

Soft Geometry Creative Industries
is a music-based design company located in Bristol UK.
I create artwork for albums, singles, posters and t-shirts.
My work is influenced by punk and post-punk poster and flyer design,
lo-fi photocopy aesthetics,
Francis Bacon and Mark Rothko.

I can provide a start to finish service with my own art and photography, put together work from images provided by yourself, and collaborate on an idea.
softgeometrycreative{at}gmail.com

Follow CSS play


Facebook   Twitter   Facebook Fan Page