title: Height of background wont auto-adjust to the container
body: <p>I want one section on my webpage with a fixed background and a gradient-overlay so the text is readable. The problem is that the background only covers the top 10 pixels or something like that. The height won't auto adjust to the size of the container. If i put in height: 200px etc it works but i would just like it to auto adjust to the content.</p>
  
  <p>It shows like this with just the small bar of the background: <a href="https://i.stack.imgur.com/4g0ED.png" rel="nofollow noreferrer">Picture</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section id="random" class="random"&gt;
  &lt;div class="content-wrap"&gt;
  
  
  &lt;div class="col-50-1"&gt;
  &lt;h2&gt;Festivals&lt;/h2&gt;
  &lt;p&gt;
  Donec in iaculis velit, eu viverra leo. Nullam eleifend, dolor at pharetra 
  fringilla, eros est fermentum velit, rutrum vestibulum massa ligula ut 
  purus. Mauris consectetur posuere ante, ullamcorper iaculis enim interdum 
  vulputate. Duis finibus neque lectus. Nullam ligula libero, facilisis eget  
  suscipit mi ullamcorper. Fusce ut sodales velit. Phasellus auctor ligula
  &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="col-50-2"&gt;
  &lt;h2&gt;Uitgaan&lt;/h2&gt;
  &lt;p&gt;
  Donec in iaculis velit, eu viverra leo. Nullam eleifend, dolor at pharetra 
  fringilla, eros est fermentum velit, rutrum vestibulum massa ligula ut  
  Fusce ut sodales velit. Phasellus auctor ligula est.
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.random {
  height:auto;
  background: linear-gradient(rgba(141, 153, 174, 0.8), 
  rgba(141, 153, 174, 0.5)),
  url(https://static.pexels.com/photos/196652/pexels-photo-196652.jpeg) 
  no-
  repeat fixed;
  background-size: cover;
  }
  </code></pre>