CSS3 Multiple background images

Firefox 3.6 is in beta and I was overjoyed (ie: opening presents on Christmas day) to discover that Mozilla have finally implemented my favourite part of the CSS3 borders and background spec: multiple background images on a single element.

One of the (many) points of controversy in our team when we last updated the HTML standards doc was the best way to provide enough html structure in our document to accommodate what our designers create. We want small, slick and semantic markup but have to add extra structural divs so we have enough places to stick the background images we use to decorate the boxes.

Firefox 3.6 gives me a little hope, even if it is distant hope, that one day the extra divs will no longer be needed!

How multiple background images are declared

Just put a list of background declarations instead of a single one when you use the background property:

Complete example

You don’t have to use the background property. You can also list out each of the background attributes separately:

The browser applies the images top to bottom, so the first one you declare will overlap any of the others. It supports all the background attributes you can usually use.

Here’s how the example looks in Firefox 3.6 (sorry for my lack of graphic design skills!):

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:

Here’s how my example looks in Firefox 3.5:

I tested the same example in IE8 and Opera 10.10 and it looked the same as in Firefox.

Why is this so great?

The biggest reason is it goes further in separate presentation from markup. We’re a little closer to being able to mark up a document according to it’s meaning rather than how we want to present it. That’s a really good things because it means we can change the presentation without having to change the document.

I am of the opinion that fewer tags in a HTML document is a good thing. It’s fewer tags to read and understand when you have to change the document. It’s fewer tags to debug when something goes wrong with the page. It is also fewer tags to send down to the client on each request.

I think it’s going to empower designers to be a bit more daring with their designs. They won’t have to worry about dirty looks from whoever does the HTML markup (or a sigh from themselves) when they design something with rounded corners and drop shadows. I look at designers like that when I see a mockup with rounded corners! They shouldn’t have to feel bad about it! Making great looking designs is just their job.

It’ll also make it much easier to make design elements that are stretchy. You can change the dimensions of stretchy elements easily just by changing the width and height properties. You can reuse the same styles in different containers without having to have a whole different set of styles and images (or a heap of structural divs).

Who supports it?

Firefox – from Firefox 3.6 (currently in beta – should be released in the next couple of months). It’s supported in any Mozilla browser that uses Gecko 1.9.2 or newer.

Webkit – Safari has supported this since version 1.3 and Chrome has always supported it.

IE – as of IE8 there’s no support for this yet.

Opera – as of Opera 10.10 there’s no support for this.

But Helen it’s going to be years before we can use this stuff!

It’s true we don’t know when IE is going to support multiple background images and we don’t know how long it will take for the old versions of IE to fade into market share obscurity. It might be three or four more years until this has enough browser support to be used widely across the web.

That’s ok, it’s how the web works. Way back in 2000 it seemed impossible that there could be a document object model that worked across all the browsers but sooner or later the stars all aligned to unleash the ajax revolution. I am excited because it’s a step in the right direction for a better web for web developers. I am happy with that for now.

Still my 2010 Christmas wish is pleeease can we have this for IE9?