Mark Scerri – Eye on the web

Now this is cool! Multiple background images can allow you to do some awesome tricks with layout without the need of writing complex markup to your website.

The basic syntax for multiple backgound images in CSS3 is easy. Instead of listing a single image source for your background-image property, you list up to a maximum of four comma-separated images. You can also specify up to four values for the respective background-repeat and background-position properties for each of the images. So here’s the code:

#multiBackground {
  background-image:url(img1.png), url(img2.png);
  background-repeat: no-repeat, no-repeat;
  background-position: top left, top right;
}

So for the million dollar question, which browsers currently support multiple background images? At the moment it’s Safari 4.0, Chrome 3.0, and Firefox 3.6. But beware Firefox 3.6 is only in alpha so the number of users using this browser will be only a handful.

So is it worth the hassle? One of the problems is that other browsers reject the code and will not even display the first image because of the comma in the decleration, leaving the background blank. However there is a workaround for this. First you declare the background-image in the usual way (single image). Opera and older versions of Firefox and Safari ignore any newer CSS code. For Internet Explorer one can use conditional comments to send the single-image code.

Multiple background images can be used for wonderful effects, HOWEVER, make sure that your website will work with older browsers, and with new browsers that do not support this technique.