Fun with CSS3 Multiple Backgrounds

Share this!

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

Share this!

About JeffCohan.com

The nSiteful Tech Blog (the official blog of nSiteful Web Builders, Inc. since January of 2013) is where I (Jeff Cohan) and (occasionally) associates will be posting articles of potential interest to like-minded techies, nSiteful clients who are playing active roles in the maintenance of their own Web sites and blogs, and pretty much anyone interested in how Web strategies and tools can help them reach their goals.

This entry was posted in Snippets and tagged , by Jeff Cohan. Bookmark the permalink.

About Jeff Cohan

Jeff and his wife, Margie, are the proud parents of Sarah and Jake. Jeff is the founder, president and chief cook and bottle washer of nSiteful Web Builders, Inc., a Web development and Internet Consulting firm. In his spare time, Jeff builds Web sites and Web applications, plays guitar, putters around in his basement woodworking shop, mercilessly spoils his grandchildren, and creates videos from more than two decades of home movies. His current video project is an extended montage of people (mainly family members) asking him to stop filming them.

Leave a Reply

Your email address will not be published. Required fields are marked *