Solved

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

Posted on 2009-04-10
7
533 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 62 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How do i learn Story Board for IOS ? 3 100
Any Third party toll for Integrating chat system on ASP.NET ? 2 42
Scientific articles behind a login? 6 26
Button to go back 3 25
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

773 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