Multiple Backgrounds

CSS3 supports multiple background images which means it provides us with the ability to add more than one background image to any element.

Before CSS3, adding the multiple background image required placing an additional element in the markup to contain the new background image.

Old CSS way
snippet
<body>
<div id="midground">
<div id="foreground">
<!-- page content here -->
</div>
</div>
</body>

/*css style */
body {
background: url(vines-back.png) repeat-x 20% 0;
}
#midground {
background: url(vines-mid.png) repeat-x 40% 0;
}
#foreground {
background: url(vines-front.png) repeat-x 150% 0;
}


The multiple background images syntax include the values of all the background properties, including background-image and the shorthand background property. To make a declaration for multiple background images, simply separate the values for each individual image with a comma.

Multiple backgrounds syntax
And here’s how simple it is to assign these four images as backgrounds of the body element, using the updated CSS3

snippet
background-image:
url(firstImage.jpg),
url(secondImage.gif),
url(thirdImage.png);

This works just as well if you’re using the shorthand background property:
snippet
background:
url(firstImage.jpg) no-repeat 0 0,
url(secondImage.gif) no-repeat 100% 0,
url(thirdImage.png) no-repeat 50% 0;

syntax:
snippet
body {
background:
url(../img/stars-1.png) repeat-x fixed -130% 0,
url(../img/stars-2.png) repeat-x fixed 40% 0,
url(../img/space-bg.png) repeat-x fixed -80% 0,
url(../img/clouds.png) repeat-x fixed 100% 0;
background-color: #1a1a1a;
}

The background images are layered one on top of the other with the first declaration on top, as if it had a high z-index. The final image is drawn under all the images, as if it had a low z-index.

The default values for the various background properties are listed below:

■ background-color: transparent;
■ background-image: none;
■ background-position: 0 0;
■ background-size: auto;
■ background-repeat: repeat;
■ background-clip: border-box;
■ background-origin: padding-box;
■ background-attachment: scroll

We can include a gradient as one of several background images.
snippet
#ad2 {
background-image:
url(../images/bg-bike.png),
linear-gradient(top,
rgba(0,0,0,0.4) 0,
rgba(0,0,0,0) 37%,
rgba(0,0,0,0) 83%,
rgba(0,0,0,0.06) 92%,
rgba(0,0,0,0) 98%);
background-position: 50% 88%, 0 0;
}
Related Tutorial