title: Text is hiding behind background-image
body: <p>I want to display text in front of the background-image. But it will always hide my text.
  Code is:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="header"&gt; 
  &lt;div class="container"&gt; 
    &lt;div class="container-bg"&gt;
    &lt;/div&gt;
    &lt;div class="container-content"&gt;
      &lt;h1&gt;Test Test Test Test Test Test&lt;/h1&gt; 
      &lt;p&gt;Test Test Test Test Test Test Test Test Test Test Test Test&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>h1 {
    font-size: 46px;
    color: #ccc
  }
  p {
    font-size: 28px;
    color: #ccc
  }
  .header {
    position: relative;
    padding: 30px 0;
  }
  .container-bg {
      position: absolute;
      top: 0;
      bottom: -60px;
      right: 0;
      left: 0;
    background-image: 
      linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%),
      url(https://i2.wp.com/www.pro-gamer-gear.de/wp-content/uploads/2014/08/gamer-pc-zusammenstellen.jpg?fit=1170%2C700);
      background-size: cover;
  }
  .container-content {
    text-align: center;
  }
  </code></pre>
  
  <p>JSFiddle:
  <a href="https://jsfiddle.net/g700q3qc/3/" rel="nofollow noreferrer">https://jsfiddle.net/g700q3qc/3/</a></p>
  
  <p>Please help :)</p>