Place an image OVER an image?

HTML & CSS
1

Hi!

I have a div that is 1000px wide *200px high.

It has an image(image 1) in it, of the same dimensions, currently being used for an Image Map.

However, I would like to place a smaller image ‘over’ image 1, so it appears in the middle.

How could I best do this?

2

The best way to position things accurately one on top of the other is to wrap them all in a <div style=“position:relative”> and then use position:absolute and their top and left position relative to the surrounding div. When the relative div moves to a different position on the page due to resizing the browser window all the content within it including those that are position:absolute move with it.

3 

<div style="width: 200px; height: 1000px; position: relative;">
   <img id="image1" style="position: relative;" src="..." alt="..." />
   <img id="image2" style="position: absolute; top: <y>px; left: <x>px;" src="..." alt="..." />
</div>

Where <y> is (1000 - height of image2) / 2
And <x> is (200 - width of image2) / 2

As long as the surrounding div stays 1000 * 200 this should work :slight_smile:

4

Oh man, you guys are too cool.
runs off to check if it works ok, be back in 2

5

Many thanks. I had used margin-top: instead of top beforehand. Thanks again folks, such speed! :smiley: