How can I overlay images (png) on ​​a website?

Question

I am trying to set the image in the middle of another (slightly larger) image so that it is inside the larger image (in this case, the phone). I don’t know how to do it right, and any help is greatly appreciated!

Answer 1

You need to set the z-index css property.

HTML:

 <img id="png1" src="png1.png" /> <img id="png2" src="png2.png" /> 

CSS:

 #png1 { position:absolute; top:0; left:0; z-index:0; } #png2 { position:absolute; /* set top and left here */ z-index:1; } 

Here is a demo: http://jsfiddle.net/AlienWebguy/6VSBv/

Answer 2

 <img style="position:absolute;left:10px;top:10px;" src="img1.png"> <img style="position:absolute;left:20px;top:20px;" src="img2.png"> 

Of course, you will need to adjust the coordinates, and I highly recommend putting CSS in the stylesheet instead of inline. Here is a pretty good CSS tutorial for more information: http://www.csstutorial.net/

Answer 3

So you are new to html and CSS. This is not a problem, but your question is a bit vague for the SO common format .

However, in a nutshell:

 <style> #phone {background: url('http://www.knowabouthealth.com/wp-content/uploads/2010/06/iphone.jpg') center no-repeat; width: 300px; height: 392px; border: 1px solid #000000;} #display {background: #000000; margin: 80px auto 0px; width: 164px; height: 246px; color: #FFFFFF;} </style> <div id="phone"> <div id="display"> Hello! What is up? Miley rocks! </div> </div> 

Real-time example: http://jsfiddle.net/cbn4L/

This, of course, is a very simple example. And since you can see that the inner container is not an image, but text. Technically, you can add an image there now .. but since we will weaken you into the world of HTML and CSS, this is the best example and may possibly improve your concept :)