/    Sign up×
Community /Pin to ProfileBookmark

Foreground Image over a Table

Copy linkTweet thisAlerts:
Sep 18.2013

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!

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@rtretheweySep 18.2013 — The code would look something like:
<i>
</i>&lt;div style="position:relative; top:0; left:0; z-index:1;"&gt;
&lt;table&gt;
.
.
.
&lt;/table&gt;
&lt;div style="position:absolute; top:0; left:0; width:300px; height:200px; z-index:2;"&gt;
&lt;img src="your-image.png" style="margin:0; padding:0; width:300px; height:200px;"&gt;
&lt;/div&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@lonogodauthorSep 18.2013 — 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!
Copy linkTweet thisAlerts:
@rtretheweySep 18.2013 — 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?
Copy linkTweet thisAlerts:
@lonogodauthorSep 18.2013 — 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.

[code=html]<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>[/code]

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!
Copy linkTweet thisAlerts:
@lonogodauthorSep 18.2013 — Nevermind. I figured out a way that I think will work for me.

Thank you for all your help!!
Copy linkTweet thisAlerts:
@stuvart20135Sep 19.2013 — 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.**
Copy linkTweet thisAlerts:
@priyankagoundSep 23.2013 — You need to put the img and the table inside the relative positioned div:

<table class="table1">

<tr>

<td>Text 2</td>

<td>Text 3</td>

</tr>

<tr>

<td>

<table class="table2">

<tr>

<td>Text 4</td>

</tr>

<tr>

<td>Text 5</td>

</tr>

<tr>

<td>Text 6</td>

</tr>

<tr>

<td>Text 7</td>

</tr>

</table>

</td>

<td>

<div class="table-foreground">

<img id="img1"

src="http://msadesign.net/sitebuilder/images/Gold_Horizontal_Rectangle3-600x185.jpg"

/>

<table class="table3">

<tr>

<td>Text 8</td>

</tr>

<tr>

<td>Text 9</td>

</tr>

</table>

</div>

</td>

</tr>

</table>

CSS:

div.table-foreground img {

position:absolute;

top:50px;

left: 30px;

}
×

Success!

Help @lonogod spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...