facebook icon twitter icon angle down linkedin icon youtube icon
Home > Blog > transparent-background-css

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.

Tarikul islam

About Torikul islam

Torikul islam is a professional web developer and affiliate marketer. Join Torikul to learn how to start a website and operate it well. He started his Web Developement career from Bangladesh Association of Software and Information (BASIS) in 2015. Later he continiued his journey to expanding knowledge and sharing it with others.

Write a Comment

No comment yet