How can I overlay two images in HTML5

html, image

Solution

You can set the two images in an absolute position and then position them with top,left,right,bottom..

your html

<div id="image1"> <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcThtVuIQ7CBYssbdwtzZjVLI_uw09SeLmyrxaRQEngnQAked5ZB"></div>

<div id="image2"> <img src="http://www.desktop-bilder.com/images/wallpapers/40-wiese-und-himmel.jpg"> </div>

your css

#image1 {
position: absolute;
top: 20px;
left: 20px;
}

#image2 img {
width: 80%;
}

EDIT: CHECK OUT THIS FIDDLE

Problem

Original source