Solved

Add two pictures on top of each other in html

Posted on 2013-10-25
3
270 Views
Last Modified: 2013-10-28
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.
0
Comment
Question by:mdoland
  • 2
3 Comments
 
LVL 7

Expert Comment

by:Ironhoofs
ID: 39599918
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
 
LVL 7

Expert Comment

by:Ironhoofs
ID: 39599939
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
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 39600035
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

Featured Post

Back Up Your Microsoft Windows Server®

Back up all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question