Display Overlapping Images on Your Webpage

By Stephen Bucaro

If you have several related pictures on your webpage, you could just display them in a vertical or horizontal row, but a more creative effect would be to display them overlapping. You could easily do this using your favorite graphics editor to combine them into a single image, but that has a disadvantage. To re-arrange the pictures or adjust the overlap, you need to start over each time in the graphics editor.

In this article, I'll show you how to use a little style code to display overlapped images on your webpage. You can re-arrange or adjust the overlap by just changing a few numbers. I think you'll be surprised how little code it requires and how simple it is. It all relies on style positioning.

The plan is to place all the images within an html <div> element with its position property set to relative. This is so that the images will behave normally by flowing into position with the rest of the content on your webpage. The images themselves are placed in <span> elements within the <div>. The <span> elements position properties are set to absolute. This allows the <span>s to be positioned as required within the <div>.

In this example, I'll use three images; arches001.jpg, arches002.jpg, and arches003.jpg, all pictures taken at Arches National Park in Utah. Shown below is the code to place the images, overlapping on the webpage.

<div style="position:relative;
width:424px; height:300px; float:left;">

<span style="position:absolute; top:0px; left:0px;">
<img src="arches001.jpg" />
</span>

<span style="position:absolute; top:120px; left:80px;">
<img src="arches002.jpg" />
</span>

<span style="position:absolute; top:50px; left:200px;">
<img src="arches003.jpg" />
</span>

</div>

Note that no top or left properties are specified for the containing <div>. This is because the values of those properties will depend upon where the <div> flows to when the browser renders the page. Top and left properties are specified for the <span>s within the <div>, and playing with these values is how you arrange the images and their overlap. basically you just keep editing these numbers and reloading the webpage until you like how it looks.

RSS Feed

 General Web Design
 HTML Design
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues
 FREE Graphics Warehouse

With this book, readers can start with a tour of the stylesheet language, or skip ahead to any chapter of the book to look up specific tasks covering just what they need to know. This task-based, visual reference guide uses step-by-step instructions, and plenty of screenshots to teach beginning and intermediate users CSS.

Reader David Diez of Boston, MA says, "This book's strategy seems to be show an example, give a general explanation, provide a few key but brief tips, move on. The writing is clear and concise. ... I continue to be very pleased and impressed with the book. It's proving to be a helpful reference and everything in it is highly accessible. Click here for more information.