title: opacity background with no opacity text
body: <p>I am trying to make a div that is as wide as the screen but has a slightly dimmed out background image, but it is making any over laid text dimmed out also.  How can this be changed so only the background image is dimmed and not any overlaid text please?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.venue-header-text {
    font-size: 3.5em!important;
    font-weight: 700!important;
    color: white!important;
  }
  
  .inner-slider .slide {
    padding: 100px 0 100px;
    position: relative;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: white!important;
  }
  
  .slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6)!important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="text-center"&gt;
    &lt;section class="inner-slider hyr-section-height-override"&gt;
      &lt;div class="slide" style="background-image:url('/site-data/articles/venue1/header.jpg');"&gt;
        &lt;div class="container"&gt;
          &lt;h2 class="venue-header-text"&gt;VENUE 1&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="slide-overlay"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>