www.webdeveloper.com
Results 1 to 8 of 8

Thread: Foreground Image over a Table

  1. #1
    Join Date
    Jun 2005
    Location
    Georgia
    Posts
    155

    Foreground Image over a Table

    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!

  2. #2
    Join Date
    Mar 2011
    Posts
    1,136
    The code would look something like:
    Code:
    <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>
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jun 2005
    Location
    Georgia
    Posts
    155
    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!

  4. #4
    Join Date
    Mar 2011
    Posts
    1,136
    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?
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Jun 2005
    Location
    Georgia
    Posts
    155
    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.

    HTML Code:
    <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!

  6. #6
    Join Date
    Jun 2005
    Location
    Georgia
    Posts
    155
    Nevermind. I figured out a way that I think will work for me.

    Thank you for all your help!!

  7. #7
    Join Date
    Sep 2013
    Posts
    1
    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.**

  8. #8
    Join Date
    Sep 2013
    Posts
    221
    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;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles