Fun with CSS3 Multiple Backgrounds

Last updated May 13th, 2016 at 04:38 pm

CSS3 supports multiple backgrounds for an element. There are lots of resources on the Web that tell you how to do it (I list a few below). It’s actually remarkably easy and intuitive. And most modern browsers support multiple CSS backgrounds.

What I want to do here is show you why and when you might want to try this.

Example: Rating Stars

Suppose you’ve got a ratings system and you want to display star icons to signify each rating scale.

The old way, using background-repeat

• Excellent

You might have guessed (correctly) that my CSS is using a repeating (repeat-x) 48×48 pixel transparent PNG image of a star.

Here’s the HTML:

<ul class="ratings">
<li>Excellent<span class="excellent-2"></span></li>
</ul>

The repeating graphic appears within the empty span element.

And here is the pertinent CSS:

.excellent-2 {
	background: url(images/star_48.png) repeat-x right center;
	padding: 12px 240px 12px 0;
}

The trick here is to provide enough horizontal padding to fit all 5 repeats of the 48px-wide image (48×5=240) and nothing more.

Now this works okay. And I could create four more rules: one each for very good, good, fair, and poor.

But let’s suppose I’m not crazy about the spacing of the stars. They look kind of far apart, even though they’re actually kissing each other (their white spaces, that is).

What if I could get the stars closer together? What if I could even overlap them for a nifty effect?

The good news is I can using CSS3 multiple backgrounds!

The new way, using CSS3 multiple backgrounds

• Poor
• Fair
• Good
• Very Good
• Excellent

Here is the HTML for the above:

<ul class="ratings">
<li>Poor<span class="poor"></span></li>
<li>Fair<span class="fair"></span></li>
<li>Good<span class="good"></span></li>
<li>Very Good<span class="very-good"></span></li>
<li>Excellent<span class="excellent"></span></li>
</ul>

And here is the pertinent CSS:

.poor {
	background: 
		url(images/star_48.png) no-repeat left center;
		padding-left: 48px;
}
.fair {
	background: 
		url(images/star_48.png) no-repeat left center,
		url(images/star_48.png) no-repeat 20px center;
		padding-left: 68px;
}

.good {
	background: 
		url(images/star_48.png) no-repeat left center,
		url(images/star_48.png) no-repeat 20px center,
		url(images/star_48.png) no-repeat 40px center;
		padding-left: 88px;
}

.very-good {
	background: 
		url(images/star_48.png) no-repeat left center,
		url(images/star_48.png) no-repeat 20px center,
		url(images/star_48.png) no-repeat 40px center,
		url(images/star_48.png) no-repeat 60px center;
		padding-left: 108px;
}
.excellent {
	background: 
		url(images/star_48.png) no-repeat left center,
		url(images/star_48.png) no-repeat 20px center,
		url(images/star_48.png) no-repeat 40px center,
		url(images/star_48.png) no-repeat 60px center,
		url(images/star_48.png) no-repeat 80px center;
		padding-left: 128px;
}

Note that to get the overlap effect for all the cases except poor, I’m just adding 20 pixels to each successive horizontal position value.

Are you wondering about the padding-left declarations? The empty spans need padding for there to be a background in which the background images can appear. I could have set them to be some large number. But I wanted to be more precise. So here’s the formula to determine the padding width:

(w*n) - ( (w-f) * (n-1) )

where w is the width of the image, n is the number of background images, and f is the horizontal offset value for the background positions.

A Variation

Now look at the next two lines:

• Excellent 1
• Excellent 2

Do you see the difference?

Excellent 1 is the same as you saw above, in the original CSS3 Multiple Backgrounds example. Each successive star is under the one to its left.

But Excellent 2 is a bit different. In this case, each successive star is on top of the one to its left.

The difference has to do with the order of the backgrounds in the style rule. The is the one counter-intuitive thing about CSS3 multiple backgrounds. Unlike most things in CSS, where the last thing wins out, the first background in a multiple background declaration wins out — that is, comes out on top.

Here is the style rule for Excellent 2 (whose class is excellent-reverse).

.excellent-reverse {
	background: 
		url(images/star_48.png) no-repeat 80px center,
		url(images/star_48.png) no-repeat 60px center,
		url(images/star_48.png) no-repeat 40px center,
		url(images/star_48.png) no-repeat 20px center,
		url(images/star_48.png) no-repeat left center;
		padding-left: 128px;
}

Fun, yes?

Can you think of nifty applications for CSS3 multiple background images? Please share below.

Resources for HOW to do multiple CSS background

• W3.org specification
• CSS3.info: Multiple Backgrounds with CSS3
• CSS-Tricks: Stacking Order of Multiple Backgrounds