How to add overlay to background image

Question

I am certainly new to Web design.

As seen in this picture, most of the websites I see have this kind of mask over images, and then text over that mask.

So how do I achieve that if I don't edit the picture that way, and want to add the mask over it.

I am using a Bootstrap Jumbotron for the header part of website, with container-fluid property and it's height set at 100vh. I use an image as background image to the jumbotron. It's really a common thing and can be seen in many websites. For example:

So how do I add a mask or an overlay to the background image, certainly a black tint, so that I can make white text visible.

P.S. I am very new to css, and I came to know about these mask and overlay properties today itself.

You can certainly be helped with this issue, but you have to provide your code so that we may point you in the right direction. — cmprogram, Mar 07 '19 at 10:49

score 4 · Answer 1 · answered Mar 07 '19 at 10:56

4

Try to use linear gradient:

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../some-image.jpg");

For more info check this link: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

answered Mar 07 '19 at 10:56

This answer was very helpful. Thanks – Zubair Amin Mar 23 '23 at 21:54

score 3 · Accepted Answer · answered Mar 07 '19 at 10:54

You could nest two blocks together, one with the background image, and the other with the overlay :

.background{
  width: 500px;
  height: 500px;
  background: url('https://static1.squarespace.com/static/56be46d2a3360cae707270a0/t/5772ef9b20099e38818859b0/1467150245253/');
  background-size: cover;
}

.overlay{
  width: 500px;
  height: 500px;
  background-color: rgba(0, 0, 0, 0.5);
}

<div class="background">
  <div class="overlay">
    <!-- Content here -->
  </div>
</div>

The opacity of the overlay can be modified with the last argument of the rgba() function.

How to add overlay to background image

2 Answers2