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. With CSS, 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 is layered nearest to the top, or closer to the user, in the browser. You can also add a general color for the background in the same declaration if you wish, like this:

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

Specify the color last, and this will show up below...