Multiple Backgrounds in CSS3

submit to reddit

One of the biggest problem with CSS2 is its inability to add more background images to a particular division(<div>). This inability is solved in CSS3. CSS3 – Backgrounds and Borders Module has lots of new features.

Adding multiple backgrounds using CSS3 is simple. It is still possible in CSS2 where we can specify a Div above another Div to get multiple backgrounds. But with the new rules in CSS3, we can easily add multiple backgrounds to a single division in HTML.

We can have ‘N’ number of layers in CSS3. The number of layers is determined by the number of comma separated values in the  Background property.

For example.,

1
2
3
4
5
6
7
#Multiple
{
border: 2px solid #cccccc;
<strong>background:<span style="color: #993366;">url(image1.gif) center</span>, <span style="color: #000080;">url(image2.gif) center no-repeat</span>;</strong>
height: inherit;
width: inherit;
}

or we can also write like this,

1
2
3
4
5
6
7
8
9
10
#Multiple
{
border: 2px solid #cccccc;
<strong>background-image: url(image1.gif), url(image2.gif);
background-position: center , center;
background-origin: border-box, content-box;
background-repeat: no-repeat,no-repeat;</strong>
height: inherit;
width: inherit;
}

Refer to the Output below.,

This is an Example for Multiple
Backgrounds, using CSS 3!!

If you look through the code, you can see several background images placed on top of each other.The first image is the one which is at the top. The second image is placed behind the first one and so on.,

Browsers that support CSS3 multiple backgrounds are Firefox 3.6, Opera 10.5 and Google Chrome 3.5 version. IE uses filters to add multiple backgrounds!