You are currently viewing How to Make Background Transparent CSS
  • Post category:CSS

How to Make Background Transparent CSS

How to Make Background Transparent CSS

In this article, we will see how to make the background transparent CSS.  Transparent means if we set the transparent background to any child element, it will display the parent background. We can set the transparent background using two, there are:

  1. Set CSS “background” property to “rgba(255, 255, 255, .2)
  2. Set “background” property to “transparent

Example code:

<html>
<head>
</head>
<style type="text/css">
*{
  padding: 0px;
  margin: 0px;
}
section{
  background: url("nature.jpg");
  justify-content: center;
  display: flex;
  padding: 0 100px;
  height: 100vh;
  background-size: cover;
}

.trans{
  margin-top: 20px;
  position: relative;
  max-width: 500px;
  padding: 50px;
  max-height: 250px;
  background: rgba(255, 255, 255, .2); 
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
} 

</style>
<body>
 <section>
  <div class="trans">
   <h2>Background Transparent</h2>
   <p>Hello Everyone, Do you know how to set Background Transparent in CSS. 
      If don't you know how to do it, this article is for you. </p>
  </div>
 </section>
</body>
</html>

Output:

how to make background transparent css

Steps:

  1. In the above example code, we have created <section> tag and inside it, we have <div>. Inside the div element, we have created <p> and <h2> tags.
  2. In CSS, we set the background image for <section> element. And we have set the transparent background for <div> element.
  3. See the above output, We have set transparent background for the div so the background of the parent(section) element is visible.

We can also create a transparent background like this:

div{
background : transparent;  }

 

I hope you have understood a little about the transparent background in this article. If you have any doubts about this then please comment below.

Leave a Reply