title: Display text over image with a filter using Bootstrap?
body: <p>I'm trying to place some text over an image that has a background color as a tint and opacity.</p>
  
  <p>I'm using Bootstrap 4 and it's possible some classes are overriding each other, but not 100% sure.</p>
  
  <p>This is what I currently have:</p>
  
  <p><code>Index.cshtml</code>:</p>
  
  <pre><code>&lt;div class="layer"&gt;
      &lt;div class="jumbotron jumbotron-fluid jumbotron-container resume-jumbotron text-white"&gt;
          &lt;div class="container-fluid jumbotron-content"&gt;
              &lt;h1 class="text-center jumbotron-header mb-4"&gt;Hey there, I'm @Model.FullName!&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <p><code>site.css</code>:</p>
  
  <pre class="lang-css prettyprint-override"><code>.jumbotron-container {
      background-repeat: no-repeat;
    background-position: center center;
      background-size: cover;
      filter: opacity(60%);
  }
  
  .resume-jumbotron {
      background-image: url(https://content.codecademy.com/courses/asp-dot-net/boots.png);
  }
  
  .layer {
      background-color: #512F1E;
      position: relative;
  }
  
  .jumbotron-header {
      font-weight: bold;
  }
  
  </code></pre>
  
  <p>The above renders this:</p>
  
  <p><a href="https://i.stack.imgur.com/uoWxW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uoWxW.jpg" alt="enter image description here"></a></p>
  
  <p>I've tried adding a z-index and position to the <code>layer</code> and the header but it screws up the rest of the positioning in the jumbotron. </p>
  
  <p>The currently rendered text shows up behind the background color. How can I position the text so it renders above the <code>.layer</code> div despite it being a child of it?</p>