• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

nSiteful Web Builders

Building a Better Web - One Site at a Time.

  • Home
  • About
    • Testimonials
    • Resources
  • Web Sites
  • Online Marketing
  • WordPress Support
    • Customized WordPress Training
    • 60-for-60 Sessions
  • Web Applications
  • Blog
    • Archive Listing Minimalistic
    • Blog Articles Grouped by Category
    • Case Studies
    • General
    • Portfolio
    • Reviews
    • Snippets
    • Techniques
  • Contact Jeff
    • Purchase Retainer Consulting Hours
    • About Retainer Consulting Hours

By Jeff Cohan, June 17, 2013

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

Related Posts

  1. Bring your Facebook Fan Page to your Web site
  2. 14 days exploring Pinterest, Day #2
  3. How to use Advanced Custom Fields with Genesis
  4. Underlining for Emphasis: How to un-underline text on a Web page with CSS
  5. CSS Descendant Selectors
  • Choose the best match.

Written by Jeff Cohan · Categorized: Snippets · Tagged: Background Images, CSS

  • Choose the best match.

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

mailchimp signup

Subscribe to get notified when new articles are published. Unsubscribe any time. No spam. I promise. Check out my newsletter archives.

social

Twitter Facebook LinkedIn

Recent Articles

  • Use Case for Custom Post Type: “In The News” March 10, 2023
  • Create a Custom Shortcode to Display a MemberPress Membership Price ANYWHERE on Your Website February 5, 2023
  • Avoid Direct Styling; Use CSS Instead September 21, 2022
  • Blog Tags: What They Are (and What They’re Not) August 5, 2022
  • How to Create a Simple Custom Events Plugin May 24, 2022

Filter By Category/Tag

Categories

  • Case Studies (7)
  • General (61)
  • Portfolio (5)
  • Reviews (12)
  • Snippets (16)
  • Techniques (38)

Popular Tags

Advanced Custom Fields Blogging Child Themes Content Marketing CSS CSS Grid Customer Service Custom Fields Custom Post Types Diagnostics Facebook FooGallery Genesis Gutenberg HTML Images iPhone Libra Live Chat Marketing Media MemberPress MemberPress Courses mu-plugins MySQL Photo Gallery php Pinterest Plugins Post Formats Pricing Project Management Security SEO Seth Godin Shortcodes Social Networking Surveys Taxonomies Trello Twitter Video Web design Web forms WordPress

siteground wp hosting

Web Hosting

wp101

EasyWordPresstutorialvideosforbeginners.
MemberPress CTA

Footer

Background

Web Sites | WordPress Support | Web Applications.

Formally trained in liberal arts and education (I have a B.A. in Government from Harvard and studied Secondary Education at Rutgers Graduate School), I have honed my skills in the communication arts and sciences as a teacher, trainer, instructional designer, writer, photographer, calligrapher, helpdesk manager, database programmer, and multimedia developer.

(I've also been a group counselor, waiter, bartender, bicycle messenger boy, computer salesman, carpenter's helper, financial analyst, and school board president.)

Tech

Systems since 1983.
Web sites since 1994.
PHP since 2001.
WordPress since 2007.

Contact

770-772-5134
Email Jeff
Send Money
All Ways

Copyright 2023, nSiteful Web Builders, Inc.

 

Subscribe

Pardon the interruption. I know popups can be annoying. But I’d love to have you as a subscriber.

Sign up to be notified when new articles are published. Unsubscribe any time.

* indicates required

Powered by MailChimp

×