Mobile Friendly Website

CSSPLAY

Doing it with style

BOXESCSS3 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 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.



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 http://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.

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page