Make a Transparent Background on your website Using CSS
Last Updated on Dec 5, 2022 - Written By Torikul Islam
Transparent background can make your website more attractive. But designers sometimes face problems doing it.
Here I discussed different ways to make a transparent background using CSS.
How to Make transparent background on your website?
You can do it in the following ways.
1: Use RGBA color
You can use rgba()
function to make a transparent background. It only changes the background, not text color or text opacity.
Definition of rgba(R, G, B, A)
R for red, G for green, B for blue, and A for alpha. R, G, B, A can be integers or percentages. 255 indicates the highest value of RGB, which means 100%. A can be a number between 0 and 1, where 1 indicates 100% or full opacity.
RGBA example:
background-color: rgba(51, 170, 51, .3) /* 30% opaque green */
2: Use two separate DIV
You can do it by using two separate div
. one for content and another for background.
CSS:
.content {
position: relative;
color: black;
padding:5px;
}
.background {
position: absolute;
width: 100%;
height: 100%;
background: red;
opacity: .3;
}
HTML:
<div class="background"></div>
<div class="content">
<p>Transparent background.</p>
</div>
You can make transparent background also by using JavaScript. I will try to discuss that in another post.