HTML5 and CSS3: Building Responsive Websites

Multiple background images

Although a little out of fashion at the moment, it used to be a fairly common design requirement to build a page with a different background image at the top of the page than at the bottom. Or perhaps to use different background images for the top and bottom of a content section within a page. Back in the day, with CSS2.1, achieving the effect typically required additional markup (one element for the header background and another for the footer background).

With CSS3 you can stack as many background images as you need on an element.

Here's the syntax:

.bg {
    background: 
        url('../img/1.png'),
        url('../img/2.png'),
        url('../img/3.png');
}

As with the stacking order of multiple shadows, the image listed first appears nearest to ...