How to preserve text color with a color overlay in a Bootstrap Jumbotron?

Question

Searching I didn't find this mentioned and per Bootstrap 4.2 documentation on the Jumbotron I've coded my div to include an inline background image but when I apply an overlay it covers the text, the code:

.jumbotron {
  position: relative;
  background-size: cover;
}
.jumbotron > .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(40, 40, 38, 0.5);
  z-index: 1;
}
.jumbo-text:after {
  z-index: 10;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron p-3 p-md-5 text-white rounded bg-dark" style="background: url(img/foobar.jpg) no-repeat center center / cover;">
  <div class="overlay"></div>
  <div class="col-md-6 px-0">
    <h1 class="display-4">Title of a longer featured blog post</h1>
    <p class="lead my-3">
      Bacon ipsum dolor amet landjaeger cow kevin meatball pork rump. Ham
      hock venison ham pastrami, beef porchetta doner tongue filet mignon.
      Shank tri-tip porchetta pork turducken swine pork belly hamburger
      strip steak andouille landjaeger shoulder. Pastrami pig sausage
      porchetta rump. Shank doner pork loin buffalo. Pork chop jerky tail
      tenderloin, buffalo tongue turkey pork belly pork loin leberkas
      porchetta hamburger rump short ribs.
    </p>
    <p class="lead mb-0 padded-multiline">
      <a href="#" class="text-white font-weight-bold">More</a>
    </p>
  </div>
</div>

I've tried adding a div for the text and setting the z-index to a higher value but that didn't work. Since the background image would be dynamic/changing and not a fixed/standard set background how can I properly apply an overlay to the inline image but keep the text in the jumbotron a true #ffffff?

Answer 1

I altered the jumbotron p-3 and p-md-5 padding, and added the padding to the overlay, which allowed me to remove the position absolute from the overlay. I also wrapped the text within the overlay div.

.jumbotron.p-3.p-md-5{
  padding:0px !important;
}

.jumbotron>.overlay {
  height:100%;
  width:100%;
  background-color: rgba(40, 40, 38, 0.5);
  padding:50px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="jumbotron p-3 p-md-5 text-white rounded bg-dark" style="background: url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2013/11/27/10/rexfeatures_3211080a.jpg?w968) no-repeat center center / cover;">
  <div class="overlay">
    <div class="col-md-6 px-0 ">
      <h1 class="display-4">Title of a longer featured blog post</h1>
      <p class="lead my-3">
        Bacon ipsum dolor amet landjaeger cow kevin meatball pork rump. Ham hock venison ham pastrami, beef porchetta doner tongue filet mignon. Shank tri-tip porchetta pork turducken swine pork belly hamburger strip steak andouille landjaeger shoulder. Pastrami
        pig sausage porchetta rump. Shank doner pork loin buffalo. Pork chop jerky tail tenderloin, buffalo tongue turkey pork belly pork loin leberkas porchetta hamburger rump short ribs.
      </p>
      <p class="lead mb-0 padded-multiline">
        <a href="#" class="text-white font-weight-bold">More</a>
      </p>
    </div>
  </div>
</div>