by Sai gowtham

How to change the css background image opacity without affecting text

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 its 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;
}

Here is the demo in Codepen

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course