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:
- Set CSS “background” property to “rgba(255, 255, 255, .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:
Steps:
- 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.
- In CSS, we set the background image for <section> element. And we have set the transparent background for <div> element.
- 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.