How To Add Background Overlay In Css

When an background overlay is added to a background image, it appears before the background image, it is sometime used to reduce the brightness of the background image or blur the image. background overlay can be achieved by using the background property in Css or it can be achieved using “before” pseudo element. in this article, we would be learning how to add background overlay to a background image in Css.

Since we are working just with background, there is no much items needed in our html, but just to show you one good reason to add background overlay to a background image, we would add a button and a 30 word paragraph in our html.

Example on how to add background overlay in Css

Html

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate exercitationem et dolorem placeat aliquam, nihil quidem qui asperiores sit eos enim illo fugit reiciendis, voluptatem iste totam voluptas laboriosam laudantium.</p>
<button>Explore Tours</button>

css
button {
  padding: 10px;
  width: 20rem;
  outline: none;
  border: 0px solid grey;
  box-shadow: 2px 2px 4px;
  border-radius: 10px;
  color: orangered;
  font-weight: 700;
  background-color: black;
}
p {
  width: 80%;
  text-align: center;
  margin: 0 auto;
}
body {
  height: 100vh;
  width: 100vw;
color: white;
  font-weight: 500;
  background: url('/IMG_20190701_205015.jpg') center/cover; //add your image here.
}

After adding my image, the result on my browser is shown in the image below

We can clearly see that the button and the text are hardly visible, the background image is so bright that its more pronounce than the button the and contents in it.

This is not bad but it is not a good practice, the reason is because, the contents needs to be more pronounced for the user or site visitor to see and read.

To make the button and the text more pronounced, we simple add background overlay to the background image. and this is achievable using the background property of linear gradient as shown below.

New Css
body {
height: 100vh;
width: 100vw;
color: white;
font-weight: 500;
background-image: linear-gradient(to top, black, rgba(255, 255, 255, 0.286)),
url(‘/IMG_20190701_205015.jpg’); //ensure to add your image path properly
background-position: center;
}

So when we added the background overlay, the browser output looks like what is shown below

Your opinion might be different

From my own point of view, this is much more better than the first

Why because, the contents displayed are more pronounced than the background image.

Now, we can easily read the text content as well as see the button.
So this is just one of the simple ways we can add background overlay to a background image in Css.