Applying tint to background image - html

Question

I have a following class that has a background image to it, and this is the image I want to apply a tint over:
<div class="jumbotron d-flex align-items-center" id="upper-half" style="background-image: url('${mediaInfo.backdrop}')">
<div class="tint"></div>
</div>
<div class="class2">
....
....
</div>
Classes jumbotron and class2 divide the screen into two parts, both of which are visible simultaneously on the screen.
The problem is, when I apply tint, it applies to the whole screen, even on the class class2. Ideally, that should not happen as it is defined inside the hjumbotron class.
Here's the CSS:
#upper-half {
background-size: cover;
background-blend-mode: multiply;
}
.tint {
z-index: 0;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0, 0.9);
}
Can someone tell me what's going on? I want the tint to cover only the jumbotron class, not anything else.

Answer 1

Its because your .tint class is absolute positioned which is relative to body because you have not applied position:relative in its parent...
So use position:relative in ##upper-half
#upper-half {
background-size: cover;
background-blend-mode: multiply;
position:relative;
}

Answer 2

Its because of the tint class which is absolute and covering whole screen because of its style. Try adding following style to your #upper-half and I think it will solve your problem.
#upper-half{
position: relative;
width: 100%;
height: 200px;
background-size: cover;
background-blend-mode: multiply;
}
Change the width and height to your desired dimension and don't forget to use position:relative; or else tint will take the dimensions of body.
Hope this helps