Multiple Background Images using CSS3

CSS3 allows you to add multiple background images to any box element. It is so simple to use multiple background images in your stylesheet by using nothing more than comma separated values. You can write the code in two ways; individual property or shorthand property.

In the individual background properties you can specify the value in separate background layer e.g. background-image and then background-position etc. Look at the code below for full example:

#multiple-background{
width:500px;
height:300px;
background-image:url(image.jpg), url(image2.jpg);
background-position: center bottom, left top;
background-repeat: no-repeat, repeat;

You may also apply other properties as well using the same method like background-clip, background-origin, background-size etc.

Another method of writing the same code is shorthand property. In which you can give whole style in single background layer (single line), have a look the following code:

#multiple-background{
width:500px;
height:300px;
background:url(image.jpg) center bottom no-repeat, url(image2.jpg) left top repeat;

This is how you can write the same code in multiple way, use if how it fits best for you. CSS multiple background image reduces your work in realtime. When it comes to the browser support, it supports all the major web browsers including IE9.