2

I want to add an image on top of another image in this site. The HTML codes are found here. There is already a string of javascript code present that functions to make the bigger uploaded photo as a canvas to be typed on it. Now the problem is I cannot seem to place the smaller image on top of the canvas photo just like adding text on it.

I tried the basic image on image code but I do not seem to know how to fit the code properly. Source question: How do I position one image on top of another in HTML?

<div style="position: relative; left: 0; top: 0;">
    <img src="a.jpg" style="position: relative; top: 0; left: 0;"/>    
    <img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>
</div>

Instructions on how it should go: http://i66.tinypic.com/dokpcp.jpg

HTML code for the site (it works offline): http://codepen.io/fallonpark/pen/mPwREG

Community
  • 1
  • 1
moolahmari
  • 31
  • 3

1 Answers1

1

You can define the margins of the inner image by setting the top and left values. If both images have the same width you should be able to achieve what you want with something like this:

<div style="position: relative; left: 0; top: 0;">
    <img src="a.jpg" style="position: relative; top: 0; left: 0;"/>    
    <img src="b.jpg" style="position: absolute; top: 50px; left: 0px;"/>
</div>
tomasantunes
  • 814
  • 2
  • 11
  • 23