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.