Multiple backgrounds with CSS

Using images in the background is always a better option to make your website look attractive.  Now most of the web browsers are supporting multiple backgrounds. Now we can have multiple background images to a DIV or any box elements.  Suppose there is a div with id divId

#divId{
width: 500px;
height: 250px;
background-image: url(girl.png), url(boardskygrass.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}


In the above example

two images are used sheep.png and boardskygrass.png

A comma-separated list of values for the background-image property, with each value generating a separate ‘background layer’.  The comma separated lists from the individual background images are then matched up, starting with the first value in each list.
     In the same way we can also use a comma separated list for the other background properties; like background-repeat, background-attachment, background-position, background-clip, background-origin and background-size.

If excess values are provided for any of the above properties they are ignored. e.g. if four values are supplied for the background-repeat property, but only three values are supplied for the background-image property, the fourth value in the list would not be used.
In the same way if not enough values are supplied for any of the individual properties, the list of values for that particular property are repeated, from the first value, as many times as required. For example; if only two values are supplied for the background-position property, but three values are supplied for the background-image property, the list of values for background-position would be repeated, thus the third background image specified would have the same background-position value as the first, as the first value is considered for all the background images.


Browser Compatibility

Browser support for multiple backgrounds is relatively widespread with all of the main browsers offering support, without the need for vendor prefixes.

Firefox has supported multiple backgrounds since version 3.6 (Gecko 1.9.2), Safari since version 1.3, Chrome since version 10, Opera since version 10.50 (Presto 2.5) and Internet Explorer since version 9.0.  So, there is no need to worry about the compatibility.  But you cant help if anybody is still using IE6*.

Share Your Solutions