When developing a website, users often want to generate a transparent background that will not affect other content on the web page. But, in general, no CSS property like background-opacity exists that will change the background from opaque to transparent or vice versa.
But, there is a way to reach this feature, and it is users can fake this property by using a pseudo-element with this CSS opacity and initializing the exact size of the HTML element in it. There is no need to worry that users have no CSS property that they can apply to change only the background images.
This article will discuss all the approaches and how users can change a CSS Background image's opacity without affecting the other contents.
Why do users use fake opacity property by creating a pseudo-element to change the CSS background image's opacity?
Since there is no direct use of the CSS opacity property to change the HTML element's background, it is a matter of discussion for front-end developers. Such a case often involves a background image with text, but developers want to make it transparent without affecting the text.
In such situations, when they apply the opacity property, the changes made in the parent element will get inherited to the child elements and thus affect the other contents like text, image, etc., apart from the background.
Thus, to overcome such challenges, users can use an alternative approach where they will set the background image into a pseudo-element of the parent (generate a fake CSS opacity property in the pseudo element). In the following sections, you will find how it works with its respective code snippet –
Approach 1: Creating a pseudo-element and inserting the background image of the parent element
It is the first approach to fixing the problem of changing backgrounds. The background image allows users to set one or more images as the background for the HTML element.
Doing this will ensure that the parent and the child element are on separate layers so that applying changes to the image's background does not affect the child element.
Code Snippet:
<html>
<head>
<title>How to Change Opacity of Background Image using CSS</title>
<style>
.demo1{
background-image: url('https://d2fg0sxb1esmnr.cloudfront.net/userfiles/bg-image-2.png');
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.demo {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.demo::before {
content: "";
background-image: url('https://d2fg0sxb1esmnr.cloudfront.net/userfiles/bg-image-2.png');
position: absolute;
background-size: cover;
top: 0px;
right: 0px;
opacity: 0.50;
bottom: 0px;
left: 0px;
}
h1 {
position: relative;
color: #009654;
font-size: 8rem;
line-height: 0.9;
text-align: center;
}
</style>
</head>
<body>
<div class = "demo1">
<h1>Orignal Image</h1>
</div>
<div class = "demo">
<h1>Opacity: 0.50</h1>
</div>
</body>
</html>
Output:
Explanation:
In the above code snippet, we used separate parent and child element holders with the names "demo" and "demo::before." The reason for separation is to apply the CSS property to the parent element that will not affect the child element, i.e., the text.
We used the position property and set the top, bottom, left, and right properties to zero, which will specify the pseudo-element with the same size as the parent so it does not disintegrate. Then we set a separate content property in the pseudo-element that will not change while modifying the parent content on the page.
Next, we used the <h1> tag for the text content and set it to position: relative, which will put the text content on the top of the pseudo-element. The positioned pseudo-element will hide in the z-index layer stack if we do not explicitly specify the position property.
Approach 2: Adding an overplay with reduced opacity property with rgba()
In this example, we will show another solution that users can add to the parent element apart from changing the opacity of the background image. In the pseudo-element, users can use the semi-transparent background color.
Code Snippet:
<html>
<head>
<title>How to Change Opacity of Background Image using CSS</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
}
body {
background-color: #000000;
font-size: 90%;
}
.demo {
position: relative;
height: 90vh;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
background-image: url('https://d2fg0sxb1esmnr.cloudfront.net/userfiles/bg-image-2.png');
background-size: cover;
&::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: rgba(255, 255, 255, 0.40);
}
}
h1 {
position: relative;
color: #yyghjk;
font-size: 8rem;
line-height: 0.4;
text-align: center;
}
</style>
</head>
<body>
<div class = "demo">
<h1>STechies</h1>
</div>
</body>
</html>
Output:
Explanation:
In the above example, we used an overlay with a semi-transparent background color to change the opacity of the background image. We separated the parent and the child element into two divisions.
The reason for separation is to apply the CSS property to the parent element that will not affect the child element, i.e., the text. We then used the background-color property using the rgba() and set it to rgba(255, 255, 255, 0.40).
We used the position property and set the top, bottom, left, and right properties to zero, which will specify the pseudo-element with the same size as the parent so it does not disintegrate. Then we set a separate content property in the pseudo-element that will not change while modifying the parent content on the page.
Approach 3: Overlay div with () reduced opacity property with rgba()
<html>
<head>
<title>How to Change Opacity of Background Image using CSS</title>
<style>
.backgroundDiv{
position: absolute;
background-image: url('https://d2fg0sxb1esmnr.cloudfront.net/userfiles/bg-image-2.png');
height: 90vh;
width: 100%;
align-items: center;
justify-content: center;
background-size: cover;
}
.overlayDiv{
position: absolute;
height: 90vh;
width: 100%;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.3)
}
p{
position: relative;
text-align: center;
font-size: 10rem;
}
</style>
</head>
<body>
<div class="backgroundDiv">
<div class="overlayDiv">
<p>STechies</p>
</div>
</div>
</body>
</html>
Output:
Conclusion:
CSS and HTML make things easy and efficient for a developer who wants to develop an attractive web page or content for their end-users. Despite the limitations discussed at the beginning of this article about the CSS opacity property, we found other alternative approaches that help developers change the CSS Background Image's Opacity as per their requirements. This article highlights all the primary ways to add CSS opacity property with other properties.