title: CSS adjust brightness of image background and not content
body: <p>The section has a background image with content on top.
  I want to decrease the brightness of only the background image in the section and not the content.</p>
  
  <p>I have tried the below, however, the brightness still applies to all and not just the image.</p>
  
  <pre><code>&lt;!-- Section --&gt;
  &lt;div id="section1"&gt;
      &lt;div id="content"&gt;
  
  
  
      &lt;h1 class="heading"&gt;headline text&lt;/h1&gt;
      &lt;h4 class="subHeading"&gt; Sub-headline text&lt;/h4&gt;
  
      &lt;!-- Call to action button --&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;button&gt; Join our wait list &lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>#section1 {
  background: url('../images/headerimage1.jpg') center center no-repeat;
  background-size: cover;
  -webkit-filter: brightness(0.5);
  filter: brightness(0.5);
      padding-top: 100px;
      padding-bottom: 100px;
      padding-left: 10%;
      padding-right: 10%;
      color: white;
      text-align: center;
  }
  
  #content {
    -webkit-filter: brightness(1);
  filter: brightness(1);
  }
  </code></pre>