CODEWITHSUNDEEP
htmlcssbootstrap-5
ShrockCo
ShrockCo

Reputation: 387

How do I apply a mask over my whole image?

I am having a tough time getting a mask to cover over my whole image just using Bootstrap-5. How can I do that?

Here is my jsfiddle and my code below:

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="bg-image">
  <img src="https://mdbootstrap.com/img/new/standard/city/053.jpg" class="w-100" />
  <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)"></div>
</div>

Upvotes: 2

Views: 1605

Answers (3)

isherwood
isherwood

Reputation: 61114

You could dump a bunch of Bootstrap positioning classes in your markup, but since you'll need custom CSS anyway, I'd do it with that, either in an embedded tag or an external stylesheet. Inline styles should be strictly avoided. They're not easy to read or maintain.

The usual way is with a pseudo-element. This prevents the need for extra markup. Note that I'm using Bootstrap's position-relative class on the container rather than adding a custom style rule.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<style>     
  .bg-image:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }
</style>

<div class="bg-image position-relative">
  <img src="https://mdbootstrap.com/img/new/standard/city/053.jpg" class="w-100" />
</div>

Upvotes: 3

tacoshy
tacoshy

Reputation: 13008

just add the class position-relative to the parent element.
Then position-absolute+ top-0 + end-0 + bottom-0 + start-0 to the overlay.

No z-index needed by default.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="bg-image position-relative">
  <img src="https://mdbootstrap.com/img/new/standard/city/053.jpg" class="w-100" />
  <div class="mask position-absolute top-0 end-0 bottom-0 start-0 " style="background-color: rgba(0, 0, 0, 0.6)"></div>
</div>

Upvotes: 2

slow
slow

Reputation: 1428

To get an overlay you have to add this css code:

.bg-image{
   position: relative;
}

.mask{
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0px;
   top: 0px;
}

It's important to give .bg-image the position relative, because you want that the child element .mask behaves relative to it. Without it would overlay the whole body.

Upvotes: 0

Related Questions