Solved

Add two pictures on top of each other in html

Posted on 2013-10-25
3
274 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

617 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