Solved

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

Posted on 2009-04-10
7
525 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
Comment Utility
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 62 total points
Comment Utility
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
Comment Utility
The code works fine for me in IE6/7 and FF
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

Author Comment

by:LLC0706
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks for posting your soultion and your points.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
Accessibility and Usability are two concepts that seem to be closely related.  But, too many people seem to have a distorted perception of them. During last five years, those two words have come to the day-to-day work of almost every web develope…
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now