title: How to add overlay opacity over a background image?
body: <p>What I am trying to achieve sounds very simple but I can't get it to work.</p>
  
  <p>I am trying to add <code>opacity</code> on top of the <code>image</code> so that the <code>&lt; h1 &gt;</code> tag is easier to read.</p>
  
  <p><strong>Here is my HTML:</strong></p>
  
  <pre><code>&lt;header&gt;
    &lt;section&gt;
      &lt;div class="img_content"&gt;
        &lt;div class="bg_img" style="background-image: url('path-to-image');" &gt;
          &lt;div class="container"&gt;
            &lt;h1 class="content_h1"&gt;Most Popular Lunches: Week 11&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>And here's the CSS:</strong></p>
  
  <pre><code>/*Custom CSS */
  .img_content {
    /* background: url(); */
    background-repeat: no-repeat;
    background-size: cover;
  }
  header section{
    padding:0;
  }
  
  @media screen and (max-width: 768px){
    .content_h1 {
      font-size: 40px;
      padding: 21% 0;
      color: white;
      font-size: 14px;
    }
    .section_details {
      padding: 8% 0 19% 8%;
      font-size: 14px;
    }
  }
  
  section {
    padding: 10px 0;
  }
  
  .bg_img {
    background: #221f1f73;
  }
  .content_h1 {
    font-size: 85px;
    padding: 14% 0;
    color: white;
  }
  .section_details {
    padding: 4% 0 0 0;
    font-size: 14px;
  }
  </code></pre>
  
  <p>I think that the problem might be the <code>-Z index</code> or something similar? </p>