Multiple background images with CSS3

Assigning multiple background images to a single element is as complicated as creating a comma-separated list.

That is to say, not very. To wit:

<style>
h2 {
    background: url(star.png), url(star.png);
    background-position: left center, right center;
    background-repeat: no-repeat;
}
</style>

All H2 elements that follow will have “star.png” to either side of the text. Like so:

Here’s a section title

If you’re like me, which is to say mildly obsessed with the elegance of brevity, you can stack your declarations using the background shorthand:

<style>
h2 {
    background: 
       url(star.png) left center no-repeat,
       url(star.png) right center no-repeat;
}
</style>

The shorthand format is also intuitive for setting the order in which the various background elements appear, relative to one another, in the style of z-index. The higher in the list the element, the higher it’ll appear, relative to other elements.