Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 564
  • 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
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.

 
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

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