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
<!-- page content here -->
/*css style */
background: url(vines-back.png) repeat-x 20% 0;
background: url(vines-mid.png) repeat-x 40% 0;
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
This works just as well if you’re using the shorthand background property:
url(firstImage.jpg) no-repeat 0 0,
url(secondImage.gif) no-repeat 100% 0,
url(thirdImage.png) no-repeat 50% 0;
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;
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.
background-position: 50% 88%, 0 0;