In this blog, we will learn about setting the transparent background color in CSS.
How to Set Transparent Background Color in CSS?
To set the transparent background color, we are going to use the following methods:
Let’s go through each method one by one!
Method 1: Using background-color to Set Transparent Background Color in CSS
In CSS, the “background-color” property is used to assign a different color to the background. Moreover, using the background-color property in a specific way can also set the transparency of different elements.
Example
Here is our HTML page with two backgrounds, one as an image and the other as the container’s background. We want to make container’s background transparent so that we can see through the added image because of the container’s transparency:
In our HTML file, we have added a “<h1>” tag with a class named “bg” inside a div element and placed it inside the “<body>” tag:
In the CSS file, use the “.” before “bg” to declare it as a class. Then, add the background-color property along with the rgba value, assign the “100px” padding, and set the text color as “white”. As the rgba color scheme has its proper format, we will set all its values to zero except the last one. Set the last value to “.25” to get a transparency shade. However, it can be replaced with “0” to have a clear transparency shade.
In the next step, assign the div a padding “200px” and set the URL of the desired background image:
Note: We have not removed the background-color previously set as “aqua”. As a result, the transparent background of the container will be clearly visible using the rgba color scheme.
.bg {
background-color: aqua;
background-color: rgba(0, 0, 0, .25);
color: white;
padding: 100px;
}
div {
padding: 200px;
background: URL(Originals.jpg);
}
</style>
As you can see, we have successfully set transparent background color using background-color property.
Now, let’s check out the method of using another CSS property for setting a transparent background color.
Method 2: Using Opacity Property to Set Transparent Background Color in CSS
In CSS, the “opacity” property is used to make the elements transparent. However, there are always levels of transparency that can be specified, such as 1 – 100 (%). For instance, an element with “0” opacity will be completely transparent.
Example 1
In this example, we will assign the “0.2” opacity value to the “.bg” class. All of the other properties will remain same:
.bg {
background-color: aqua;
opacity: 0.2;
color: white;
padding: 100px;
}
div {
padding: 200px;
background: url(Originals.jpg);
}
</style>
Here, we have successfully set the transparent background:
However, setting the opacity also applied the transparency effect to the added text. To tackle such a scenario, let’s take another example.
Example 2
When you assign an opacity value, it is applied to every element within the specified container having the same class. However, changing the class of the added text can resolve the stated issue.
To do so, we will assign the class “text” to <h1> tag and class “bg” to the <main> tag:
Now, the “Transparent” text belongs to a different class “.text”. So, we will specify its “position” and give it the value “absolute”, assign the “margin-top” property value as “-9%” and “margin-left” value as “50px” to get the text on the box:
position: absolute;
margin-top: -9%;
margin-left: 50px;
color: white;
}
It can be seen that now the opacity is only applied to the container to make it transparent without changing the added text:
We have provided out the easiest ways to set the transparent background color in CSS.
Conclusion
To set transparent background color in CSS, you can use the “background-color” property with the rgba value and the “opacity” property. The background-color property can be used two times, one for setting the original background and the second to make the first one transparent using the rgba color scheme. However, the opacity property value is applied to all elements of the specific class for which it is defined. In this article, we have covered two efficient methods to set the transparent background color in CSS.
