Apr 30, 2023 Author - Sai gowtham

Change the CSS background Image opacity without affecting text

css1min read

In this tutorial, we will learn how to change a background image opacity without affecting the text using css.

When we set a opacity to the parent element which has a background-image, the opacity is also inherited to it’s child elements.

Example:

<div class="container">
      <h1>How to train a dragon</h1>
</div>

.container{
  background-image: url('car-image.jpg');
  opacity:0.5;
}

In the above example, the opacity is also applied to the h1 element text.

To stop affecting to the text, we need to set a background-image and opacity to the .container div element ::after pseudo selector.

HTML

<div class="container">
      <h1>How to train a dragon</h1>
</div>

CSS

.container{
  width:700px;
  height:400px;
  position:relative;
  display:block;
  padding:1rem;
}

.container::before{
  content:"";
  background-image: url('car-image.jpg');
  opacity:0.5;
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  width:auto;
  height:auto;
  z-index:-3;
}


.container h1{
  text-align:center;
  font-size:49px;
}