Make a Transparent Background on your website Using CSS

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.