How do I apply a mask over my whole image?

Question

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:

user_1264804 · Answer

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.

user_14072420 · Answer

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.

user_11607239 · Answer

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.

How do I apply a mask over my whole image?

3 Answers