How to Make a Transparent Background 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.

Make transparent background on your website using CSS

Make transparent background on your website

You can do it in different ways. I'm discussing here several methods.

Method 1: Use RGBA  color
Method 2: Use two separate DIV

Method 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 integer or percentage. 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 */ 

Method 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.