Technology news & comments affecting web professionals' lives

HOWTO: Creating sliding composite images

May 22, 2012

From the blog: » Creating sliding composite images

Create the appearance of a single image by layering multiple images on top of each other. The pieces can slide around the page as its width is changed, making it a perfect technique for liquid layouts.

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.

Demo Websites

To help you vizualize what your new website may look like, we've prepared different "template" websites with mock content.

Company Website

Typical pages for a business include: About Us, Products, Services, Customers, Contacts.
View Demo

Society Website

Typical pages for a non-profit society include: About Us, Officers, Programs, Meetings, Photo Gallery, Contacts.
View Demo

Portfolio Website

Typical pages for a portfolio include: Photo Gallery, About Me, Contacts.
View Demo

Event Website

Typical pages for an event include: General Information, Registration and Travel, Accommodations, Agenda/Program, Pricing, Contacts.
View Demo

Keep in mind, these are samples; your actual website will have your own branding (logo), content (text and images), and menu structure.

About Us

Web Page Authority's vision is to help businesses grow through effective and affordable web solutions. Our team members have experience in diverse industries including information technology, commerce, graphic design, printing, and management, thus building a strong foundation of expertise in web design solutions.


Contact Us

+1 (574) 208-3932 Paul (Indiana)
+1 (918) 850-4224 Bogdan (Oklahoma)