Creating sliding composite images

This tutorial is slightly adapted from Chapter 9 of my book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. You can download most of Chapter 9 for free as a PDF at the Flexible Web Design companion site, as well as download the HTML, CSS and image files that go along with this tutorial.

Since the area available for an image to display within a flexible layout changes on the fly, your images may need to as well. While fixed-width images can work within flexible layouts—as long as they’re not too large, or you have matching minimum widths in place—there are lots of ways you can dynamically change the screen area that an image takes up.

I’ve already written about how to make images literally scale and how to use variable cropping on images. But perhaps you don’t want either end of your image dynamically cropped off—there may be important content on each side that you want to always keep in view. And perhaps you don’t want to scale the entire image, because although this would keep the entire width of the image always visible, it would also change the vertical space the image takes up, which might not work for your design. This is the perfect time to try using what I call a composite image.

Creating what appears to be a single image out of multiple pieces that slide over and away from each other takes a little more work on the graphics side than the variable width image techniques we’ve gone over so far. You can use an unlimited number of images, but we’ll keep it simple and use two for our own alieninvasion example as well.

One image is going to be at least partially overlapping the other, so at least the topmost image needs to have a transparent background. (You may choose to make the lower image transparent too, to allow parts of the main page background to show through, for instance.) You can use either a GIF with index transparency or a PNG with alpha transparency. PNGs are more versatile, since they can lay over any other color or pattern without the skinny colored edge that shows around GIF images when they’re placed over something that’s a different color than they were optimized for. PNGs can also have variable degrees of transparency, instead of each pixel being either 100 percent transparent or 100 percent opaque.

We’ll use an alpha-transparent PNG of a flying saucer for our top image in this example. The flying saucer will be laid on top of a photo of the Chicago skyline, saved as an ordinary JPG.

Once you have your images made, you need two block elements to place each on as a background image. One block element needs to be nested inside the other. In a real page, you’d want to make use of block elements that were already in place as much as possible, such as existing wrapper and header divs. For this simple example, we’ll use two empty divs:

<div id="outer"><div id="inner"></div></div>

Next, you need to create rules placing each image as a non-repeating background on each div, with the image you want on the bottom used for the background of the outer div:

#outer {
	background: url(skyline.jpg) no-repeat;
	}
#inner {
	background: url(ufo.png) no-repeat;
}

Since the divs are empty, they also need dimensions added to them to stop them from collapsing entirely, as well as to create the flexible behavior that we want:

#outer {
	width: 100%;
	max-width: 1000px; 
	height: 300px;
	background: url(skyline.jpg) no-repeat;
	}
#inner {
	width: 100px;
	height: 250px; 
	background: url(ufo.png) no-repeat;
	}

Both of the images now show on the page, with the flying saucer layered over the skyline. However, the flying saucer never moves when the window changes in size—it’s always pinned to the top left corner of the skyline photo. That’s because the div for which it’s a background begins in that corner, and non-repeating, non-positioned background images display in the top left corner by default.

Note: Remember that IE 6 and earlier do not support alpha-transparent PNGs, so the flying saucer image will have a solid gray background in those browsers. Use the alphaimageloader hack described in the exercise section of Chapter 7 to fix this.

There are a couple ways to fix this: use the background-position property to change where the flying saucer displays within the div, or move the entire div. Either option is fine, but the latter seems a little easier to understand and implement—at least to me—so that’s what we’ll use here. We’ll move the div using absolute positioning; floating would work as well. First, add position: relative; to the #outer rule to make that div act as the containing element for the absolutely positioned inner div. Then, add position: absolute; as well as top and right values to the #inner rule:

#inner {
	position: absolute;
	top: 50px; 
	right: 50px;
	width: 100px;
	height: 250px;
	background: url(ufo.png) no-repeat;
	}

Now the flying saucer image will always be 50 pixels away from both the top and right edges of the skyline photo. Because the outer div has a flexible width, its right edge moves as the window is resized, which in turn makes the flying saucer image move as well.

Update, June 2009: I’ve written another tutorial on creating composite images that takes a different approach. Thought you might want to check it out too!