CODEWITHSUNDEEP
htmlcss
Prashant Pandey
Prashant Pandey

Reputation: 4642

Applying tint to background image

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.

Upvotes: 0

Views: 215

Answers (2)

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

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

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

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;
}

Upvotes: 1

Related Questions