Thursday 2 January 2014

Multiple background images in css3

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.

Note that the values for each background image are comma separated. The background-repeat has only one value.

div.test {
background-image: url(example_one.png), url(example_two.png);
background-repeat: no-repeat;
background-position: top left, top right;

}

Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

For more details:-
http://caniuse.com/multibackgrounds

No comments:

Post a Comment