5. Multiple Backgrounds

IF YOU ASKED ME two years ago, “What’s the one thing you’re looking most forward to in CSS3?” I might’ve enthusiastically replied, “Multiple background images!” At the time, the ability to layer more than one background image on a single element seemed as though it would cure a lot of the headaches we’d been suffering as web designers.

To create flexible, bulletproof solutions to design problems, we must figure out how we can get by using fewer graphics or without adding extraneous markup as hooks for extra background images. We’ve done the best with what we’ve had, but the promise of being able to assign multiple background images to an element had always seemed, to me, to be this wonderful promise of easier times with less code.

The reality, though, is that along the way, browsers have added support for much of the Backgrounds and Borders Module in CSS3 (http://bkaprt.com/css3-2/12/). Many of the properties we’ve discussed previously in the book have decent browser support today in Safari, Chrome, Firefox, Opera, and IE. And properties like border-radius, box-shadow, gradients, RGBA, and opacity make it possible to solve common problems without images at all. Many of the techniques that previously required images are possible entirely within the stylesheets themselves. All of that has obvious benefits.

So while a few years ago I was salivating over the prospect of multiple background support, today I’m less excited because of all the other tools we have at our disposal. That said, there are wonderful use cases for assigning multiple background images on a single element, and we’re going to talk about one particular technique in this brief chapter.

Parallax Scrolling

If we take a look back at the moon example site, I’ve used multiple background images on the body element to create a layered space environment. Instead of one flat image, there are four semi-transparent PNGs stacked on top of each other. Each has its own horizontal positioning to create an animated effect when the browser window is resized (FIG 5.1).

FIG 5.1: The background of the moon example site, where four PNGs are stacked to create a sense of deep space.

This technique of speed-shifting layers has been dubbed “parallax scrolling,” which our friends at Wikipedia (http://bkaprt.com/css3-2/13/) define as:

A special scrolling technique in computer graphics, seen first in the 1982 arcade game Moon Patrol. In this pseudo-3D technique, background images move by the “camera” slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. The technique grew out of the multiplane camera technique used in traditional animation since the 1940s.

Many great examples of applying the parallax effect on the web have been popping up over the last few years, and a long-time favorite of mine is the site for Silverback (http://silverbackapp.com), a handy piece of usability testing software from the folks at Clearleft (FIG 5.2).

FIG 5.2: Resize the browser window while visiting Silverback and enjoy the three-dimensional jungle experience.

Resize the browser window back and forth and notice how the layers of vines hanging down from the top shift back and forth at slightly different speeds, creating a sense of dimension. (I did that for probably an hour straight when I first encountered the site.).

Sure, not everyone is going to see it—but for those that do experience it, it’s a wonderful detail and enhanced user experience that can’t help but make you just a tiny bit happier.

The Old Way: Extra Markup

So how is it done? Paul Annett wrote up the techniques he used to create the parallax effect specifically for the Silverback site in an article for Think Vitamin back in early 2008 (http://bkaprt.com/css3-2/14/).

To layer the three layers of vines, each a separate PNG, you must have at least three available block-level elements. Two extra wrapper divs are necessary to place a background image on the body, #midground, and #foreground elements.

I’m loosely translating here, for simplicity, but the markup would be something like:

<body>
  <div id="midground">
    <div id="foreground">
      <!-- page content here --> 
    </div>
  </div>
</body>

The CSS to place the three images, each with varying horizontal positions, would be something like:

body {
  background: url(vines-back.png) repeat-x 20% 0;
  }

#midground {
  background: url(vines-mid.png) repeat-x 40% 0;
  }

#foreground {
  background: url(vines-front.png) repeat-x 150% 0;
  }

Now this works perfectly well. But it’s made far simpler when using the multiple backgrounds syntax introduced in CSS3.

Let’s take a look at how multiple backgrounds are applied to the body of the moon example site, and how that creates a simpler parallax effect for those that might experience it.

The New Way: Multiple Backgrounds Via CSS3

I’m using four semi-transparent PNGs to create the deep space background used on the moon example site. They’re all layered on the body element, stacked one on top of each other to create that sense of dimension when the user resizes the browser window.

FIGURE 5.3 shows each of the four PNG images used:

1. Dust clouds (clouds.png)

2. Blue to purple gradient (space-bg.png)

3. Layer of stars (stars-1.png)

4. Another layer of randomly-placed stars (stars-2.png)

FIG 5.3: The four semi-transparent background PNGs that are layered underneath the moon example site.

Multiple backgrounds syntax

And here’s how simple it is to assign these four images as backgrounds of the body element, using the updated CSS3 syntax:

body {
  background:
    url(../img/stars-1.png) repeat-x fixed -130% 0,
    url(../img/stars-2.png) repeat-x fixed 40% 0,
    url(../img/space-bg.png) repeat-x fixed -80% 0,
    url(../img/clouds.png) repeat-x fixed 100% 0;
  background-color: #1a1a1a;
  }

Here I’m layering the four images, with the clouds at the bottom and stars on top in a comma-delimited list. (Notice the stacking order starts with the image “closest” to the user.) I’m also repeating each of these horizontally, and setting them at differing horizontal positions (using positive and negative values) to make each layer “shift” at different speeds as the window is resized. And finally, I’ve fixed them in a locked position on the page with the fixed value.

The almost-black background color of #1a1a1a is added in last as a separate background-color rule.

And that’s it (FIG 5.4). What’s wonderful about this is that there is no extraneous markup necessary. We’re putting all of these images on the body element so that they’ll sit behind the page’s content, but we didn’t need to add dummy wrapper divs to layer them.

FIG 5.4: The four PNGs layered on top of each other as well as a dark charcoal background color.

What about browser support?

As mentioned back in Chapter 1, multiple backgrounds are supported in Safari 1.3+, Chrome 2+, Firefox 3.6+, Opera 10.5+, and IE9+. So, really, they’re on par with many of the other CSS properties we’ve been using throughout the book.

Once again, we’ve chosen to utilize this wonderful CSS3 gem in a non-critical part of the design because of that imperfect support: enriching the background of the page, heightening the experience of resizing the window by creating a parallax effect for those that are able to experience it.

Providing a fallback for all browsers

Older browsers that don’t support multiple backgrounds will ignore the entire background rule. And that’s precisely why we’ve defined the background-color in a separate rule.

FIGURE 5.5 shows the moon example site as viewed in IE7, where the multiple background images we’ve declared are ignored, showing only the charcoal background-color.

FIG 5.5: IE7 ignores the rule where multiple background images are declared, showing only the dark charcoal background color.

Now, nothing is broken here—but losing all the space-y-ness in the background is a shame. The solution is to specify a single fallback background image first in the declaration, for browsers (like IE7 and 8) that don’t support multiple images. Then we can override that rule with the multiple one (which will be ignored by IE).

body {
  background: url(../img/space-bg.png) »
    repeat-x fixed -80% 0;
  background:
    url(../img/stars-1.png) repeat-x fixed -130% 0,
    url(../img/stars-2.png) repeat-x fixed 40% 0,
    url(../img/space-bg.png) repeat-x fixed -80% 0,
    url(../img/clouds.png) repeat-x fixed 100% 0;
  background-color: #1a1a1a;
  }

For the single image fallback, you could choose one of the images used in the multiple declaration, or even go so far as to create a flattened version of the multiple layers.

For the moon site, I’ve chosen to simply use space-bg.png, which is the color gradient image (FIG 5.6), therefore serving a starless, cloudless version of the background to browsers that don’t yet support multiple background images. How appropriate.

FIG 5.6: With the single fallback image in place, IE7 now has a bit more space-y-ness restored.

Using Multiple Backgrounds Today

In keeping with the theme of the other examples in the book, here we’re using multiple background images today. We’re forging ahead with a CSS3 property that has healthy support in Safari, Chrome, Firefox, Opera, and IE. Instead of fearing the non-support in older browser versions, we’re choosing to apply the property on a non-critical visual event (a parallax-shifting background).

We also know that if the browser doesn’t support multiple backgrounds, it will ignore the entire background rule. To compensate, we’ll define a flat or alternate single graphic in a background rule that comes before the multiple one.

And with all of that in mind, we can now more flexibly experiment with layering, shifting, and positioning background images on top of each other, without the need for extra markup. It’ll be exciting to see how this technique is used in creative new ways.