Skip to content Skip to sidebar Skip to footer

How Can I Overlay Two Images In Html5

How can I put my logo on top of another image in HTML5 and/or CSS3 I did this on photoshop for a friend http://i.imgur.com/Mya3BB9.png there are 2 images, I have no idea how can I

Solution 1:

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

your html

<divid="image1"><imgsrc="http://t1.gstatic.com/images?q=tbn:ANd9GcThtVuIQ7CBYssbdwtzZjVLI_uw09SeLmyrxaRQEngnQAked5ZB"></div><divid="image2"><imgsrc="http://www.desktop-bilder.com/images/wallpapers/40-wiese-und-himmel.jpg"></div>

your css

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

#image2img {
width: 80%;
}

EDIT: CHECK OUT THIS FIDDLE

Solution 2:

one approach is to set one as background-image and other as an regular image ... Working Example :http://jsfiddle.net/prashant_ghimire/fDuu5/7/

<!DOCTYPE html><html><head><style>body 
{
background-image:url('http://wallike.com/wp-content/uploads/2013/04/flower-desktop-background-640x400.jpg');
background-color:#cccccc;
background-size:320px280px;
background-repeat:no-repeat;

}
</style></head><body><h1>Hello World!</h1><imgsrc="http://www.southeastern.edu/admin/stu_dev/family_day/images/selulogo.jpg" /></body></html>

Post a Comment for "How Can I Overlay Two Images In Html5"