Put images on top of another image using HTML?

Question

I was wondering how to have one image as a background, and put other button images on top of it in HTML?

Solution 1

You need to place them in a container div and then position it relatively.

Something like this could do it:

<div style="position:relative; left:0; top:0;">
  <img src="x.png" style="position:relative; top:0; left:0;"/>
  <img src="y.png" style="position:absolute; top:30; left:70;"/>
</div>

Solution 2

Yes, you can definitely do that... this article can give you a few tips on positioning images...

Making an image position relative to the top of the page