Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Add two pictures on top of each other in html

Posted on 2013-10-25
3
Medium Priority
?
279 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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…

885 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