title: Semi-Transparent div background on top of img tag
body: <p>How do I get a div background image to show above a img html tag. The reason for wanting to do this is for a semitransparent texture that overlays rotating images in a banner. I don't want to have to cut the texture with the image each time. That way adding/updating images in the future would be faster. I have tried the advice given in this post, but did not seem to work: <a href="https://stackoverflow.com/questions/4556656/css-show-div-background-image-on-top-of-other-contained-elements">CSS show div background image on top of other contained elements</a>. Thanks for any help.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="sliderFrame"&gt;
      &lt;div id="slider"&gt;
          &lt;span id="slider-background"&gt;
              &lt;img src="/_images/rotating-banner/001.jpg" /&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>#sliderFrame {position:relative;width:850px;margin: 0 auto;} 
  
  #slider {
    width:850px;height:470px;/* Make it the same size as your images */
    background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
  }
  
  #slider-background{
    position:absolute;
    background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
    width: 850px;
    height: 470px;
    z-index: 100;
  }
  </code></pre>
  
  <p>link to live site: <a href="http://lltc.designangler.com/" rel="nofollow noreferrer">http://lltc.designangler.com/</a></p>