title: background-color tint effect applied to a background-image
body: <p>I have tried applying a color overlay with transparency to a background image, the background image is displaying and hopefully the code is okay for this, but if someone has a more efficient way of doing this please share.</p>
  
  <p>When I try and apply the background-color with rgba values and transparency, nothing shows...</p>
  
  <p>Any suggestions?</p>
  
  <pre><code>.call-to-action {
  color: #fff;
  background: url(images/cta-bg.jpg) no-repeat center center fixed;
  background-color: rgba(255, 255, 255, 0.5) !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  font-size: 18px;
  padding: 48px 12px;
  text-align: center;
  }
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/8iNun.png" rel="nofollow">http://i.stack.imgur.com/8iNun.png</a></p>