Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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.