title: Make div overlays background image but not content
body: <p>I'm trying to make <code>div</code> that overlays background image, but not content, like this:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12 featured"&gt;
              &lt;div class="overlay"&gt;&lt;/div&gt; &lt;!--optional--&gt;
              &lt;center&gt;
                  &lt;img src="img/logo.svg"&gt;
                  &lt;h1&gt;Title&lt;/h1&gt;
              &lt;/center&gt;                   
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where <code>div</code> featured has background image:</p>
  
  <pre><code>.featured {
      background-image: url(img/bg.jpg);
  }
  </code></pre>
  
  <p>Now I've tried:</p>
  
  <pre><code>.overlay {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.4);
  }
  </code></pre>
  
  <p>And also:</p>
  
  <pre><code>.featured:before {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.4);
  }
  </code></pre>
  
  <p>But it all makes overlay above content. Any better techniques?</p>