title: background image with cover overlay.
body: <p>Im working on a background image that is placed with inline styling, that has a red tint overlaying the image. </p>
  
  <p>The problem occurs when the red tint is covering the content. </p>
  
  <p>How would I make the red tint go under the buttons and text?</p>
  
  <p>Please see <a href="http://jsfiddle.net/rzp318kb/" rel="nofollow">JS Fiddle</a></p>
  
  <p>Appreciate the help </p>
  
  <pre><code>#cover-wrap {
    position: relative;
  }
  #cover-wrap .black-cover {
    background-color: rgba(255, 0, 0, 0.5);
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
  }
  #backgrond-cover {
    background-color: #37383a;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 50px;
    color: #fff;
    position: relative;
  }
  #backgrond-cover .username {
    font-weight: bold;
    margin-top: 10px;
  }
  #backgrond-cover .location {
    font-size: 14px;
  }
  #backgrond-cover .summary {
    font-size: 14px;
    margin-bottom: 20px;
  }
  </code></pre>