[SOLVED] HOWTO overlay 2 images.

[rh-penguin]

hi,

 

Can somoene please tell me how to overlay one image over another.

 

Thanks!

[ToonMariner]

position the two images absolutely (or relatively) and give them a z-index.

the following code will position image 2 on top of image 1.

[code[<div style="position: relative">
<img src="1.png" width="100" height="100" style="position: absolute; top 0; left: 0; z-index: 1;">
<img src="2.png" width="100" height="100" style="position: absolute; top 0; left: 0; z-index: 2;">
</div>

 

You must give the parent element of the images a position other than static (static is the default)

[rh-penguin]

works like a charm!

 

thanks!

[rh-penguin]

One small problem tho........ when i minimize my browser the image stays where it is, how can i make it move with everything else?? If i put possition: relative OR static the image moves with the overall design but is placed on a different line(not next to the other image)

[Copyright]

That's because all block elements are allways displayed on a new line, if you want to have it o the same line with another image you must use float.

 

 

 

Later.

[rh-penguin]

i knew that................................

 

Why didnt i think of it? ???

 

LOL!

 

Thanks!

[ToonMariner]

Or you could set a fixed width and use display:inline or clear:none - which ever fits the bill best.