How do I position/overlay a transparent *png over a <table> using CSS?

Question

The problem

I need to place a transparent png image over a table element.

Clarification

By "place" I mean the image will be stacked on top of table like a layer or sticker rather than vertically above it. In other words, I want my image to move forward on the z axis rather than moving upward on the y axis.

Context

I have 8 x 6 cell table. The cells do not contain text but do contain a background color to imply a value. I want to place a white silhouetted design over the table for aesthetic reasons.

What I've tried

I've tried wrapping the table in a div, applying the image as a background and then tried bringing it forward on the z-index.

Basic demonstration of HTML:

<div class="table-foreground">
    <table>
        <tr>
            <td>
            </td>
        </tr>
    </table>
</div>

Basic demonstration of accompanying CSS:

td{
background-color:#000;
}

div.table-foreground{
background-image:url(images/table-foreground.png);
position:relative;
z-index:5;
}

The result

Note: thescientist requested that I provide the result of my attempted code.

Visually, nothing happens. I speculate that the div with the png image as it's background is beneath my table. This suggests that my code is not sufficient.

Answer 1

1. wrap your table in a div (position: relative;)
2. put your table inside
3. put your image inside the div (position: absolute; top: Y; left: X;)
4. change X and Y until it's where you want it over the table.

---

<div style="position: relative;">
    <table>

    </table>
    <div style="background-image: url('picURL'); position: absolute; top: Y; left: X; width:Xpx;height;Ypx;">
    </div>
</div>