• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 575
  • Last Modified:

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

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
LLC0706
Asked:
LLC0706
  • 4
  • 2
2 Solutions
 
sjl1986Commented:
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
 
mfhorizonCommented:
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
 
mfhorizonCommented:
The code works fine for me in IE6/7 and FF
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
LLC0706Author Commented:
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
 
LLC0706Author Commented:
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
 
mfhorizonCommented:
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
 
mfhorizonCommented:
Thanks for posting your soultion and your points.
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.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now