title: How would I get an img element to render under a background-image in CSS
body: <p>Basically, I am trying to put a semi-transparent div over an image to serve as a background for text for a slideshow. Unfortunately, the browser seems intent on always rendering the <code>img</code> over the <code>background-image</code>. Is there any way to fix this?</p>
  
  <p>Here is my current CSS for the semi-transparent div:</p>
  
  <pre><code>#slideshow .info
  {
      height: 80px;
      margin-top: -80px;
      background: url(../../images/slideshow-info-pixel.png) repeat;
  }
  </code></pre>
  
  <p>... with <code>slideshow-info-pixel.png</code> being a single pixel, 50% opacity, PNG 24.</p>
  
  <p>I have so far tried <code>z-index</code> and the CSS must be compatible with IE6.</p>