CSS3 Multiple background images

Multiple background images is a CSS3 feature that makes it possible to create complex, scalable and beautiful webpages with light-weight, semantic HTML markup.

Multiple background images can make CSS and HTML simpler:

  • It removes the need for elements just for styling. For example CSS sliding doors can be done with a single HTML element.
  • It makes it easy to create stretchy page elements that can be easily resized or dropped into different sized places in a website.
  • It empowers designers to be more daring because it’s easier to create CSS for complex designs

This has good browser support. All the recent versions of Webkit, Firefox and Opera support it. It also works in IE9 or newer.

Using multiple background images

CSS3 supports more than one background image listed in the background CSS property. The syntax is otherwise is exactly the same as declaring a single background:

  1. background: url("multiple-background-bottom.png") repeat-x bottom,
  2.             url("multiple-background-image.png") no-repeat bottom right,
  3.             url("multiple-background-bg.png");

Complete example

The browser applies the images top to bottom, so the first one you declare will overlap any of the others. All the CSS background attributes are supported.

You could also list out each of the background attributes separately:

  1. background-image: url("multiple-background-bottom.png"),
  2.                   url("multiple-background-image.png"),
  3.                   url("multiple-background-bg.png");
  4. background-repeat: repeat-x, no-repeat, repeat;
  5. background-position: bottom, bottom right, top right;

Backwards compatibility

Multiple background images degrade quite nicely in older browsers. You can supply a single background image before you declare the multiple background images and the browsers with support will show the multiple background images while the other browsers will just show the single one:

  1. /* you can put in a single background for browsers that don't support it */
  2. background: url("multiple-background-bg.png");
  3.  
  4. /* example using background short hand property */
  5. background: url("multiple-background-bottom.png") repeat-x bottom,
  6.             url("multiple-background-image.png") no-repeat bottom right,
  7.             url("multiple-background-bg.png");
Posted on 23 Nov 09 by Helen Emerson (last updated on 31 Mar 13).
Filed under CSS