title: Add a transparent color layer above a background image
body: <p>I need to add a transparent coloured layer over a background image. I tried doing this with rgba but with no result.</p>
  
  <p>What I get now is:</p>
  
  <pre><code>page-heading {
      background: rgba(36, 70, 105, 0.74) url("../images/samples/bg3.jpg") no-repeat fixed 50% 0px / cover;
      opacity: 0.9;
      position: relative;
      text-align: center;
      padding: 72px 0px;
  }
  </code></pre>
  
  <p>I know that the background color is a fallback for when the image cannot be loaded. How do I add a layer over it in a correct way? </p>