Incorporating multiple background images

- Hi, there. I'm Sue Jenkins, and welcome to Productivity Tips for Web Designers. In this week's lesson, I'll show you how you can use CSS3 to apply multiple background images to a single element in HTML. One of the first widely supported features of CSS3 was multiple background images. Before this, designers could really only specify a single image for the background property of any element. Whether you use one image, or multiple images for your background, you have the option of setting any or all of these five CSS properties for the background itself.

There's background-color, and that sets the background color of an element which would fall behind any background image that you add. Then there's the background-image. That's the image and it would sit on top of a background-color. There's the background-repeat that determines how the background-image will be repeated. Your options are none, repeat X which is horizontally, repeat Y, vertically, or no repeat at all so it just appears once and stays there. You could also use background-attachment which sets whether the background-image is fixed or if it scrolls with the rest of your page.

Then background-position which sets the starting position of a background-image. So you don't have to have it start at the exact top left corner. You could bump it down or bump it over from the top or the left. Once you create the CSS background-image style, you can apply it to a variety of elements including tags like body, header, and div. In this example, if you look over at the CSS Styles panel, you'll see that the body has a background-image applied to it, and it's set to repeat. The background image itself is just one tiny green triangle, and it's repeating over and over again horizontally and vertically.

Before multiple images were possible, the best way to get an image to fill your browser window was to repeat it like this example. If you look again at the CSS Styles panel, you'll see that the body has a background-image called scene and it's repeating along the X-axis. Let's take a look at this page in a browser window. On this page if we zoom in or zoom out, you can see that this sliver of a graphic is repeating over and over again.

Then it just fades into a solid green which is the background-color this image is actually sitting on top of. Another solution that designers would sometimes do is if you need a large image to span the entire browser window, you'd just use a really large image, or at the very least maybe a sliver of a larger image that could be repeated down or across. Now with CSS3, multiple background images help simplify the process of adding background images to your page elements. They also provide you with more opportunities to add interactivity to your web pages.

At first glance, this just looks like a single graphic; however, watch what happens when I scale the browser window up and down. On this page depending on how you size, repeat, and position your images, you can easily create a scene with parts that move as the user expands and collapses their browser window. This scene has a blue background color paired with three separate background images applied to the body tag. Let's take a look under the hood and see how it all works.

While you're adding multiple background images in your CSS, each image declaration effectively creates an image layer. The first image in your list will be closest to the viewer. Then successive images will be placed on layers behind the first. Then, the very last image in your list will be the furthest away below all the rest. If you plan to include a background color with your layers, be sure to list the background-color property last within the styles declaration block like this.

While you're looking at the code, notice that to keep each image layer distinct, you'll use comma separated values in the background-image property rather than semicolons. This can be a little bit confusing at first especially since Dreamweaver doesn't display multiple images in the CSS Styles panel. So you will need to do a little bit of hand coding until Adobe updates Dreamweaver to support the coding of multiple images. As with any CSS Style, only use the rules you need and ignore the rest.

When you're creating elements with multiple background images, be sure to list them in the desired layer order from front to back. When you code it correctly, multiple background images can create an amazing movable scene that adds a whole new level of interactivity to your site.