My aim is to enhance the jumbotron background image by adding a dark overlay with 50% opacity using CSS techniques.
I attempted to utilize the :before CSS selector to insert a dark rectangle in front of the jumbotron, which worked well for the standard jumbotron class. However, when applying the same approach to the fluid jumbotron, it resulted in the content and buttons within the container being obscured and inaccessible.
Here's my current HTML and CSS code, utilizing Bootstrap 4 classes:
.jumbotron {
position: relative;
background: url(https://source.unsplash.com/7bzbyafVTYg/1920x1080) no-repeat bottom center / cover;
}
.jumbotron:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 51, 153, 0.8);
}
.jumbotron .container {
padding: 100px 0;
}
.jumbotron h1,
.jumbotron .lead {
color: #fff;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron jumbotron-fluid mb-0 text-center">
<div class="container">
<h1 class="display-4">MAIN PAGE</h1>
<a class="btn btn-primary btn-lg mt-" href="#sec-pricing" role="button">Learn more</a>
</div>
</div>