I am facing a challenge of overlaying text on an image with a tinted background color and opacity.
While working with Bootstrap 4, I suspect that some classes might be conflicting with each other.
This is my current setup:
Index.cshtml:
<div class="layer">
<div class="jumbotron jumbotron-fluid jumbotron-container resume-jumbotron text-white">
<div class="container-fluid jumbotron-content">
<h1 class="text-center jumbotron-header mb-4">Hey there, I'm @Model.FullName!</h1>
</div>
</div>
</div>
site.css:
.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;
}
The result of the above code looks like this:
https://i.stack.imgur.com/uoWxW.jpg
I have attempted adding z-index and position properties to the layer and header classes, but it disrupts the layout of the jumbotron.
Currently, the rendered text appears behind the background color. How can I adjust the positioning of the text to display over the .layer div while still being its child?