How to Create Multiple Image CSS3 Backgrounds

By John Paul Mueller

It’s possible to combine multiple images into a single image when working with CSS3-capable browsers. At least one of the images must have transparent regions that allow the second image to peek out from behind it. The following procedure modifies the SingleImage example to contain two images. The second image is supplied with downloadable source as PawPrint.GIF.

However, you can easily substitute an image of your liking instead (as long as the image has the required transparent regions).

  1. Open the SingleImage.CSS file.

  2. Modify the body style so that the background-image property now contains two images, as shown here.

     background-image: url("PawPrint.gif"),
     background-color: SaddleBrown;
     color: SeaGreen;
     font-size: x-large;
     text-shadow: 1px 1px Yellow;

    Notice that the two image entries are separated by a comma — not many multi-entry properties require commas, but this is one of them. The order in which the images appear is also important. The image containing the transparency must appear first because it appears over the top of the second image. If you reverse the entries, the image lacking transparencies will be on top and you’ll see only one image.

  3. Save the CSS file as MulitpleImage.CSS.

  4. Open the SingleImage.HTML file.

  5. Modify the <title> and <link> tags so they look like this:

    <title>A Multiple Image Background</title>
    <link rel="stylesheet"
     href="MultipleImage.CSS" />
  6. Save the HTML file as MultipleImage.HTML.

  7. Load the MultipleImage page.

    You see the background. Notice how the paw prints overlay the original image but don’t conceal it completely.