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! Quote 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) Quote 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! Quote 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) Quote 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. Quote 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! Quote 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. Quote 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
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.