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

x
?
Solved

How do I layer one image on top of another on a web page?

Posted on 2009-04-10
7
Medium Priority
?
562 Views
Last Modified: 2012-05-06
I have a web page were I am trying to place one image on top of another. The top image, named "img-top" is transparent in places so that areas of the bottom image ,named "img-base" shows through. I am using tables to construct the page and both images are in the same table cell.
<body>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center"><img src="images/img-base.jpg" width="520" height="320" /></td>
  </tr>
</table>
</body>

Open in new window

0
Comment
Question by:LLC0706
  • 4
  • 2
7 Comments
 
LVL 8

Expert Comment

by:sjl1986
ID: 24116378
Probably the easiest way to do this would be with Photoshop (or GIMP if you'd like a free software with a lot of the same abilities Photoshop has). In Photoshop import both pictures. Place the top layer on top of the bottom layer and then save your image as JPG and you will only have to worry about moving one image around on your site.
0
 
LVL 5

Assisted Solution

by:mfhorizon
mfhorizon earned 248 total points
ID: 24116381
CSS CODE :

Code:
#flash {
      width:780px;
      height:318px;
      z-index:-1;
}

img.key {
      position:absolute;
      left:0px;
      top:315px;
      z-index:1;
}Edit the flash div to your size and edit the img.key positioning to where you want it. You can also name .key what ever you want (img.whatever), But you cannot have a space between the two.

HTML CODE :

Code:
<div id="flash">

<img class="key" src="image.jpg"  />

      ADD FLASH FILE

   </div><!-- END FLASH -->That should do it for you.
0
 
LVL 5

Expert Comment

by:mfhorizon
ID: 24116402
The code works fine for me in IE6/7 and FF
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:LLC0706
ID: 24116655
This has to be two seperate images, as the bottom image "img-base" is being called for from a data base. It is also not a Flash file.
0
 

Accepted Solution

by:
LLC0706 earned 0 total points
ID: 24119197
I've worked out a solution.

css
#base {
        position: absolute;
        width: 520px;
        height: 320px;
        z-index: 1;
}
#top{
           position: absolute;
           width: 520px;
           height: 320px;
           z-index: 2;
}

html

<body>
<table width="520" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
    <div id="base"><img src="images/img-base.jpg" width="520" height-"320" /></div>
    <div id="top"><img src="images/img-top.png" width="520" height-"320" /></div></td>
  </tr>
</table>
</body>
0
 
LVL 5

Expert Comment

by:mfhorizon
ID: 24124826
Hi,

I think the request of the author is somehow near but not exactly neutral. Since I assisted with the CSS syntax which helped author out to enhance and debug his code, i should be entitled to 50% of total points (62 points).

Regards
0
 
LVL 5

Expert Comment

by:mfhorizon
ID: 24174436
Thanks for posting your soultion and your points.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Suggested Courses

916 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