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.

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; 
}

Background Size

The background-size property allows you to specify the size you want your background images to have.

We can include background-size within the shorthand background declaration by adding it after the background’s position, separated with a slash (/). But the browser ignores the entire declaration as no browser understands this shorthand; since they see it as incorrectly formatted.

So we want to use the background-size property as a separate declaration instead.

snippet

background-size: 100px auto, auto auto; 
background-size: 100px, auto auto;

To use background properties, use commas to separate values for each image declared.

snippet

-webkit-background-size: 100px, cover; 
-moz-background-size: 100px, cover; 
-o-background-size: 100px, cover; 
background-size: 100px auto, cover;

If we wanted our background image to be really big, we could declare:

snippet

-webkit-background-size: 100px, cover; 
-moz-background-size: 100px, cover; 
-o-background-size: 100px, cover; 
background-size: 100px auto, cover;

By declaring just the width of the image, the second value will default to auto, and the browser will determine the correct height of the image based on the aspect ratio.