Transparent Background Color in CSS

  1. Use RGBA to Set Background Color and Transparency in CSS
  2. Create Transparent Background Color in CSS

Background components can be seen from another top element of the page thanks to CSS’s transparent color. background-color attributes can be used to make transparent colors.

In CSS, no property called background-opacity is used to change the opacity or transparency of an element’s background without impacting other components such as typefaces. If you try to achieve this with the CSS opacity property, it will also modify the opacity of all the other components.

We will show you how to change transparent background color in CSS with some examples.

Use RGBA to Set Background Color and Transparency in CSS

You can utilize the RGBA color, which incorporates alpha transparency as part of the color value introduced in CSS 3. As seen in the following example, the RGBA color can be used to change the color of the backdrop and its transparency.

Code Example:

<html lang="en">
<head>
<meta charset="utf-8">
<style>
    body {
        background-image: url("/examples/images/pattern.jpg");
    }
    p{
        padding: 20px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font: 18px Arial, sans-serif;
    }
</style>
</head>
<body>
    <p>Setting background transparency without affecting the content.</p>
</body>
</html>

Output:

set background transparency using RGBA in CSS

Create Transparent Background Color in CSS

To create a transparent background color, use the CSS RGBA() color code. The effect is useful to provide appearance and feel to the element if you want to make the text background visible to visitors to display the back picture.

Code Example:

<html lang="en">
<head>
<title>CSS Make Background Color Transparent Using RGBA in CSS</title>
<style>
.main-div{
    background-image: url(../../images/nature.jpg);
    background-attachment: scroll;
    padding: 20px;
}
.transparent-bg{
    background: rgba(255, 165, 0, 0.73);
    padding: 20px;
    color: #fff;
    text-align: center;
    font-size: 26px;
}
</style>
</head>
<body>
<h2>Transparent backgorund color using RGBA in CSS</h2>
<div class="main-div">
    <div class="transparent-bg">
        Transparent Background
    </div>
</div>
</body>
</html>

Output:

create transparent background using RGBA in CSS

Write for us
DelftStack articles are written by software geeks like you. If you also would like to contribute to DelftStack by writing paid articles, you can check the write for us page.

Related Article - CSS Background

  • Center Background Images in CSS
  • Darken Background Image in CSS
  • Add Background Image in CSS