rh-penguin Posted April 13, 2007 Share Posted April 13, 2007 hi, Can somoene please tell me how to overlay one image over another. Thanks! Link to comment https://forums.phpfreaks.com/topic/46847-solved-howto-overlay-2-images/ Share on other sites More sharing options...
ToonMariner Posted April 13, 2007 Share Posted April 13, 2007 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) Link to comment https://forums.phpfreaks.com/topic/46847-solved-howto-overlay-2-images/#findComment-228346 Share on other sites More sharing options...
rh-penguin Posted April 13, 2007 Author Share Posted April 13, 2007 works like a charm! thanks! Link to comment https://forums.phpfreaks.com/topic/46847-solved-howto-overlay-2-images/#findComment-228774 Share on other sites More sharing options...
rh-penguin Posted April 15, 2007 Author Share Posted April 15, 2007 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) Link to comment https://forums.phpfreaks.com/topic/46847-solved-howto-overlay-2-images/#findComment-229942 Share on other sites More sharing options...
Copyright Posted April 16, 2007 Share Posted April 16, 2007 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. Link to comment https://forums.phpfreaks.com/topic/46847-solved-howto-overlay-2-images/#findComment-230152 Share on other sites More sharing options...
rh-penguin Posted April 17, 2007 Author Share Posted April 17, 2007 i knew that................................ Why didnt i think of it? ??? LOL! Thanks! Link to comment https://forums.phpfreaks.com/topic/46847-solved-howto-overlay-2-images/#findComment-231241 Share on other sites More sharing options...
ToonMariner Posted April 17, 2007 Share Posted April 17, 2007 Or you could set a fixed width and use display:inline or clear:none - which ever fits the bill best. Link to comment https://forums.phpfreaks.com/topic/46847-solved-howto-overlay-2-images/#findComment-231541 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.