CSS3 expands background images even more. One interesting thing that CSS3 adds is multiple background images. Any place that you can use a background image in CSS you can place multiple images to create a layered effect.
Multiple backgrounds are supported by all modern browsers, except IE 8 and lower. It is a candidate recommendation and as long as you have a decent fallback image for IE 8 and lower users, it is a style that you should be very comfortable with using right now.
How to Add Multiple Background Images
You add multiple background images the same way you add single images, using the
background-image style property. You separate the images with commas. For example, here is a style with two background images:
background-image: url(image1.gif), url(image2.gif);
You can add as many images as you want, but remember that they are layered. Images at the top of the stack will show completely, while images that are lower down will be covered.
The images are stacked with the closest image (the one on top) first and the image that is furthest away (lowest in the stack) is last. This can sometimes be hard to remember, so if you’re testing and an image isn’t showing up correctly, make sure it’s not being covered by another image in the stack.
Adding Other Background Styles
Multiple background images behave just like single background images. The default for a background image is to be tiled right to left and top to bottom. If you want to change the tiling of your images, you need to use the
background-repeat style property. To tile one image horizontally while not tiling the other at all, you would write:
background-repeat: repeat-x, no-repeat;
If you don’t set the background repeat your background images will all tile normally. And if you only set one repeat value, all the images will repeat in the same way.
You can also position your backgrounds using the
background-position property. Just like
background-repeat, you separate the values with commas and place the positions in the same order as your images.
background-position: 20% 80%, top left;
If you don’t set the position at all, all your images will originate at the top left of the element. And if you set just one value, they will all share that value.
You can change any of the background image attributes to affect multiple background images on the same element, just separate the values with commas and put the top image first.
Using the Background Shorthand Property with Multiple Background Images
You can use the
background shorthand property to assign multiple background images and affect all their values in one CSS property. You place the first image and it’s other properties (repeat, position, attachment, etc.) and then add the second image and it’s properties separated by a comma. For example:
background: url(image1.gif) no-repeat 20% 80%, url(image2.gif) repeat-x top left;
Any properties you leave off will use the default for that background image.
Tips for Using Multiple Backgrounds
It can be exciting to start using multiple backgrounds once you know how to do it, and these tips will help you be as effective as you can be:
- Don’t go overboard using multiple images. Some browsers may not support more than a few images (eight being the number I’ve seen as a recommended maximum), and even though these are in CSS, they still have to be downloaded. The more images you have, the more trips to the server the browsers will make to download them.
- Rules for keeping your images small still apply. The larger an image is, the slower it will take to fully download. And a lot of background images can slow your page significantly if the images are huge.
- Use transparency. Images at the top of the stack must have transparent portions, or be smaller than the entire element, otherwise even though the other backgrounds are there, they won’t be seen by your customers (but they will still be downloaded by the browsers).
- Mix up the sizes. Traditional backgrounds would fill up the entire space, either with a large image or with tiling, but if you have one image at the bottom of the stack that fills up the space, you can then have smaller images placed on top of it in the background.
A Fun Exercise: Use Multiple Backgrounds to Create Animation
I will go over this in more detail in another article, but you can use layered backgrounds to create animations on your pages. By using scripts to change aspects such as the background position on one of your background images, you can create simple animations where the background images move inside the element.