An overlay layer for a background image

Make an overlay layer for a background image on your template. This is the HTML:

<header id="bg-section">
  <div class="dark-overlay">
   ...
   </div>
  </div>

The SASS:

$dark-overlay: rgba(0,0,0,0.7);

#bg-section {
    background: url('img/bg.jpg') no-repeat center top fixed;
    background-size: cover;
    background-attachment: fixed;
    min-height: 700px;

    .dark-overlay {
        background-color: $dark-overlay;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 700px;
    }
}