In this article I show you how easy it is to use script to display overlapping images on your webpage where you can just change numbers to play around and arrange the images and overlapping to get it just the way you like it without having to repeatedly use a graphics application.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Display Overlapping Images on Your Webpage

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 style="position:absolute; top:120px; left:80px;">
<img src="arches002.jpg" />

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


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 RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268