How can I overlay images (png) within a website?

I am trying to mount an image in the middle of another (slightly larger) image so that it appears to be within the larger image (a phone in this case). I am unsure of the proper way to make this happen and any help is mu开发者_如何学Pythonch appreciated!

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's a demo: http://jsfiddle.net/AlienWebguy/6VSBv/

<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 would highly recommend putting the CSS in a stylesheet instead of inline. Here's a pretty good tutorial on CSS for more information: http://www.csstutorial.net/

So you are new to html and CSS. That's no problem, but your question is a little bit vague for SO's general 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>

Live example: http://jsfiddle.net/cbn4L/

This of course is a extremely simple example. And as you can see the inner container is not a image, but text.. Technically you can add there a image now.. but as we are easing you in to the world of HTML & CSS, then this is a better example and maybe can enhance your concept :)