Progressive Decoration with CSS3 Multiple Backgrounds

Of all the new web technologies being espoused, CSS3 appears the most implementable, since it allows us to drop in new decorative properties without messing up things for older browsers.

The most often cited examples of this is are {text-shadow}, {box-shadow} and {border-radius}, which allow us to add drop shadows and rounded corners to elements that simply revert to their non-shadowed and non-rounded counterparts when support is not available.

Less familiar is CSS3′s ability to accept multiple declarations with the {background} property in a way that contains fallbacks. Multiple background images are mostly proposed as a way of implementing the ‘sliding door‘ technique for elastic or flexible layouts without the need for additional markup. This method is not recommended for production use because of Internet Explorer’s lack of support and therefore need for the extra HTML elements.

The method described in this article is not a substitute for sliding doors, but provides the ability to create additional image ‘layers’ for background elements when support is available, and revert to a singular ‘default’ background when it is not. No additional markup is required for older browsers.

Demo

Download

Tutorial

HTML:

Nothing unusual here, just a basic, single-column layout.

<div id="header">
    <h1>Main Title</h1>
</div>

<div id="content">
   <h2>A Heading</h2>
   <p>Dummy text here</p>
</div>

<div id="footer">Some footer text could go here.</div>

Images:

Here are the different image files that are used in the demo. .png is the best format to use for the layered elements, since it allows for alpha-transparency. The default background image is a plain old .jpg

CSS:

First we provide the basic default declarations using CSS 2.1 properties only. This allows us to ensure that the ‘fallback’ will look okay in non-CSS3 browsers.

html, body, h1, h2, p {
	margin:0;
	padding:0;
}
body {
	font-family:Georgia, "Times New Roman", Times, serif;
	background: url(../images/soil.jpg) repeat 0 0;
}
h1 {
	color:#E1FCD5;
	font-size:5em;
	text-align:center;
}
h2{
	font-size:3em;
	margin-bottom:0.5em;
}
p {
	font-size:1em;
	margin-bottom:1em;
}
#header {
	height: 200px;
	padding-top: 30px;
	background: url(../images/grass.jpg) repeat-x 0 top;
}
#content {
	width:500px;
	margin:0 auto;
	padding: 20px 30px 40px;
	color:#2C2416;
	background-color:#CF9;
	border: solid 5px #9C0;
}
#footer {
	height:180px;
	padding:90px 0 0;
	text-align:center;
}
#footer p {
	color:#D9FF8B;
	font-size:1.5em;
}

Next, we’ll add some shadows and rounded corners to the wrapper and heading elements:

html, body, h1, h2, p {
	margin:0;
	padding:0;
}
body {
	font-family:Georgia, "Times New Roman", Times, serif;
	background: url(../images/soil.jpg) repeat 0 0;
}
h1 {
	color:#E1FCD5;
	font-size:5em;
	text-align:center;
	text-shadow:1px 2px 2px #000000;
}
h2{
	font-size:3em;
	margin-bottom:0.5em;
	text-shadow:1px 1px 2px #000000;
}
p {
	font-size:1em;
	margin-bottom:1em;
}
#header {
	height: 200px;
	padding-top: 30px;
	background: url(../images/grass.jpg) repeat-x 0 top;
}
#content {
	width:500px;
	margin:0 auto;
	padding: 20px 30px 40px;
	color:#2C2416;
	background-color:#CF9;
	border: solid 5px #9C0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 5px 50px #000;
	-moz-box-shadow: 0 5px 50px #000;
	box-shadow: 0 5px 50px #000;
}
#footer {
	height:180px;
	padding:90px 0 0;
	text-align:center;
}
#footer p {
	color:#D9FF8B;
	font-size:1.5em;
	text-shadow:2px 2px 2px #000;
}

Finally, the multiple background declarations:

html, body, h1, h2, p {
	margin:0;
	padding:0;
}
body {
	font-family:Georgia, "Times New Roman", Times, serif;
	background: url(../images/soil.jpg) repeat 0 0;
	background: url(../images/bomb.png) no-repeat 50px 300px,
				url(../images/skeleton.png) no-repeat 750px 550px,
				url(../images/chest.png) no-repeat 70px 800px,
				url(../images/cave.png) repeat-x 0 bottom,
				url(../images/soil.jpg) repeat 0 0;
}
h1 {
	color:#E1FCD5;
	font-size:5em;
	text-align:center;
	text-shadow:1px 2px 2px #000000;
}
h2{
	font-size:3em;
	margin-bottom:0.5em;
	text-shadow:1px 1px 2px #000000;
}
p {
	font-size:1em;
	margin-bottom:1em;
}
#header {
	height: 200px;
	padding-top: 30px;
	background: url(../images/grass.jpg) repeat-x 0 top;
}
#content {
	width:500px;
	margin:0 auto;
	padding: 20px 30px 40px;
	color:#2C2416;
	background-color:#CF9;
	border: solid 5px #9C0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 5px 50px #000;
	-moz-box-shadow: 0 5px 50px #000;
	box-shadow: 0 5px 50px #000;
}
#footer {
	height:180px;
	padding:90px 0 0;
	text-align:center;
}
#footer p {
	color:#D9FF8B;
	font-size:1.5em;
	text-shadow:2px 2px 2px #000;
}

How the Syntax Works

background: url(../images/soil.jpg) repeat 0 0;
background: url(../images/grass.jpg) repeat-x 0 top,
            url(../images/bomb.png) no-repeat 50px 300px,
            url(../images/skeleton.png) no-repeat 750px 600px,
            url(../images/cave.png) repeat-x 0 bottom,
            url(../images/soil.jpg) repeat 0 0;

There are different forms for using multiple backgrounds and this is the shorthand method, which is easier to read and edit, in my opinion.

It is quite straightforward in that you create a second {background} property after the default one, and declare your multiple images in a comma separated list using the same syntax as you would normally.

The stacking order is easy to remember if you are used to the concept of Photoshop layers – the image that appears at the top of the list (the first that is declared) is rendered on top of all the others, then each one is rendered behind the last. The last image is the furthest at the back.

Non CSS3 browsers will not be understand any of this, so ignore it and fallback to the first {background} property with the 2.1 syntax.

I’m not sure what the maximum number of layers you can use are. Some people quote four, but I have tried six without problems and the W3C spec doesn’t appear to specify a limit. It is probably not a good idea to go too overboard however since each layer is a separate HTTP request and it isn’t really possible to use sprites with this technique.

Examples:

Layout in IE8:

Layout in FireFox 3.6:

Support.

Webkit, Firefox 3.6+, Opera 10.5+

Conclusion.

CSS3 multiple backgrounds have a lot of potential beyond offering an alternative to sliding doors, and if used correctly will not break your design in older browsers.

Why not have a go at adding some extra decorative elements to your sites today?

Further Reading.

Overview of CSS3 and progressive enhancement by Perishable Press
Smashing Magazine article on fudging CSS3 support in IE
the W3C CSS3 background and borders module spec