Background Image Opacity Without Affecting Text

 If you use text on top of the background image, the text will not be clear, for this you need to reduce the opacity value of the background image. But if you create a background image and text using the <div> tag, the text will be affected as you reduce the size of the opacity. So, in this article, I will explain to you for example, how to reduce background image opacity without affecting the text in CSS.

3 Methods to Reduce Opacity without affecting text in CSS

If you reduce the opacity of the background image using the opacity property in CSS, it will affect your text. But I’ll tell you how to use it. So, if you reduce your opacity using a linear-gradient method it will not be affecting text in CSS.

Let me tell you, how to reduce the opacity to background-image in with simple methods without affecting the text in  CSS:

Method 1: Linear-Gradient

First, you have a div tag with the class and you must have some text inside the div element, like this:

<div class="image">
<h1>Nature is Beauty!</h1>
</div>

After creating HTML elements, You have to create a background image for the div class. You should not use the background-image property because you can not linear-gradient in it. You can use a linear gradient using the background property and enter your background-image URL in it. Using the background property, the opacity color can be specified by the RGBA method with a linear gradient value then enter the URL or path of your image with the value URL. After set, the background image, assign the height and width value according to the size of your image.

.image{
background: linear-gradient(rgba(250,250,250, 0.3),
rgba(250,250,250, 0.6)), url('../HTML/nature.jpg');
height: 100vh;
width: 100%;
background-position: center;
background-size: cover;
display: flex;
}

h1 {
color: black; 
font-size: 10rem;
line-height: 0.9;
text-align: center;
font-family: serif;
}

Output:

Method 2: Z-Index

Use the same HTML as before, for the class of the div element you need to type the property value as display: flex. It would help if you wrote the style by adding :: before with your div element class. Like this : .image::before. In case, you must specify a value of ” ” for the content property, an absolute value for the position property, a value of -1 for the z-index property, and the path of your background image in the background property. The opacity of the background image without affecting the text in CSS unless you specify the property and value below will work properly. And give the required opacity level in the .image :: before selector, which will not affect your text

.image{
display: flex;
}

.image::before{
content: " ";
position: absolute;
height: 100%;
width: 100%;
background: url("../HTML/nature.jpg");
opacity: 0.7;
z-index: -1;
background-size: cover;
}

h1 {
color: black; 
font-size: 10rem;
line-height: 0.9;
text-align: center;
font-family: serif;
}

Output:

Method 3: <IMG> Tag

  In this method, You are going to set the background image using the image tag. You are going to put text on top of an image. First, we have an <img> tag inside and a tag for text inside a div element. And specify the path of your image using the SRC attribute in the <img> tag. Like this:

<div>
<img src="../HTML/nature.jpg" height="100%" width="100%">
<h1>Nature is Beauty!</h1>
</div>

You can assign your opacity value to the <img> tag in CSS using the opacity property. You must give the position is equal to absolute, Only if you give that will your text image come to the top. And in the h1 tag style, you have to give the position property as a value relative to CSS. Then style your text (H1 tag) to your liking.

img{
opacity: 0.75;
position: absolute;
left: 0;
top: 0;
}
h1 {
position: relative;
color: black; 
font-size: 10rem;
line-height: 0.9;
text-align: center;
font-family: serif; 
}

Output:

Conclusion

  These are the three types of CSS background image opacity without affecting text. And if you have any doubts, please let us know in the comment section.