Foreground Image over a Table

lonogod

Hello all,

I was trying to put a transparent image over a table. How can I achieve this?

Detailed explanation:

I am creating a Halloween version of a site. The site has a table that is 300 wide and 200 high. I want to have a transparent png image with a few spiders on it placed over the entire table. Basically it will just look like some spiders have placed themselves on top of the table.

Any help would be greatly appreciated!

rtrethewey

The code would look something like:

<div style="position:relative; top:0; left:0; z-index:1;">
<table>
.
.
.
</table>
<div style="position:absolute; top:0; left:0; width:300px; height:200px; z-index:2;">
<img src="your-image.png" style="margin:0; padding:0; width:300px; height:200px;">
</div>
</div>

lonogod

Thanks, very cool! One thing, instead of it being set as top=0 and left=0, can it be centered vertically and horizontally? The table is dead in the center of the page.

Thanks again!

rtrethewey

There's always a way, but I take it that the table isn't actually 300x200 as you said in the first message?
Can you post a link to the page or post the code?

lonogod

Uh...it is 300 x 200. It's not online at the moment though because it is a little bit personal. Anyway, here is the part of the code that is relevant. I just posted the basics since, like I said, the other stuff is pretty personal.

<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr align="center">
<td>

<div style="position: relative; top: 0; left: 0; z-index: 1;">

<table align="center" background="me-and-you.png" border="0" cellpadding="0" cellspacing="0" height="200" width="300">
<tr align="center">
<td></td>
</tr>
</table>

<div style="position: absolute; top: 0; left: 0; height: 200px; width: 300px; z-index: 2;">
<img src="foreground.png" style="margin: 0; padding: 0; height: 200px; width: 300px;">
</div>
</div>

</td>
</tr>
</table>

I know that is not the typical way to center something in the middle of a page, but it's worked for me forever. I'd prefer not to worry about changing that part. I was just hoping to know how to center foreground.png.

Thank you!

lonogod

Nevermind. I figured out a way that I think will work for me.

Thank you for all your help!!

stuvart20135

It is a usefull one thanks for posting

Links removed by Site Administrator so it doesn't look like you're spamming us. Please don't post them again.

priyankagound

You need to put the img and the table inside the relative positioned div:

CSS:

div.table-foreground img {
position:absolute;
top:50px;
left: 30px;
}