Add two pictures on top of each other in html

I am working on a html page and has a topbar with a background pattern and then some specialy styled text in the form of a .png file. The background pattern is also a .png file.

How do I add them so that the background.png becomes the background in the frame and the text.png will be displayed on top of the pattern file. Somehow the pattern need to show through where there is no text in the text.png.
mdolandAsked:
Who is Participating?
 
Alexandre SimõesManager / Technology SpecialistCommented:
You can also set the images position as absolute inside a relative container:
<div style="position:relative;">
     <img style="position:absolute; left:0; top:0;" src="background image url" />
     <img style="position:absolute; left:0; top:0;z-index:1" src="text image url" />
</div>

Open in new window

With this you can accurately change the position of the images.
Still the text image needs to have a transparent background.
0
 
IronhoofsCommented:
That will only work if text.png has a transparent background. If text.png has a solid background, there is little you can do with HTML to change that.
0
 
IronhoofsCommented:
Talking about the HTML, this is an example of how you could do it:

<html>
<body background="https://fbcdn-dragon-a.akamaihd.net/cfs-ak-ash3/84979/417/388809427820169_484552950.png">
  <img src="http://overshoot.tv/sites/overshoot.tv/files/black-on-transparent.png">
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.