title: How do I position/overlay a transparent *png over a <table> using CSS?
body: <h2>The problem</h2>
  
  <p>I need to place a transparent png image over a table element. </p>
  
  <h2>Clarification</h2>
  
  <p>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.</p>
  
  <h2>Context</h2>
  
  <p>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.</p>
  
  <h2>What I've tried</h2>
  
  <p>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.</p>
  
  <p><strong>Basic demonstration of HTML:</strong></p>
  
  <pre><code>&lt;div class="table-foreground"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Basic demonstration of accompanying CSS:</strong></p>
  
  <pre><code>td{
  background-color:#000;
  }
  
  div.table-foreground{
  background-image:url(images/table-foreground.png);
  position:relative;
  z-index:5;
  }
  </code></pre>
  
  <h2>The result</h2>
  
  <p><em>Note: <strong>thescientist</strong> requested that I provide the result of my attempted code.</em></p>
  
  <p>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.</p>