title: Footer displaying over body background
body: <p>Making a page with two basic <code>div</code> tags <code>BODY</code> and <code>FOOTER</code>.  Both <code>100% width</code>, footer is <code>50px high</code>, body is <code>100%</code>.  Body has a background image with the <code>background-size:cover;</code> applied.<br>
  I’m fine with getting the footer to stick to the bottom of the page. </p>
  
  <pre><code>.footer_wrapper {
    width:100%;
    height: 50px;
    clear:both;
    position:absolute;
    bottom:0;
    z-index:10;
    opacity:0.5;
    overflow:auto;
  }
  </code></pre>
  
  <p>I put the opacity to half so I could see that it is on top of the background body.  I need the <code>BODY div</code> above it to truly sit above it.  Should not see image behind footer.  Is this possible?  I have seen numerous tutorials but all footers are sitting on top of image.  </p>
  
  <p>Thank you</p>