Helping you solve those tough coding problems!

Creating a Transparent Background with CSS Creating a Transparent Background with CSS

Published on Mar 22, 2019 by Jamie Munro

Do you have a nice background image that you don't want hidden by a solid color and your content? With some CSS3, a background color can be set with an opacity with the rgba value so that the content or image beneath will be visible through it.





Transparent background using rgba



The best way to demonstrate this effect is with an example. Below is an image of an element that is partially transparent allowing us to see what is behind the background.



In the above example, the outer background is solid black. The inner background is a very light grey; however, the opacity is set to 40% causing the black to bleed through and make the grey much darker.

To accomplish this in CSS, the following code can be used:


div.outer {
background-color: #000;
height: 400px;
width: 400px;
padding: 1em;
}

div.inner {
background-color: # 918f8f;
background-color: rgba(145, 143, 143, 0.4);
height: 300px;
width: 300px;
}


The rgba function accepts four parameters, the red, green, blue, and alpha of the color. The alpha parameter is the level of opacity between 0 and 1; 1 being completely solid and 0 being completely transparent. In the above example, 0.4 is used to set it to 40%.

Once again CSS3 to the rescue for us again! No longer do we need to save images as PNGs or GIFs with transparency, instead a background-color and rgba value can be used to achieve the same effect.

Tags: CSS | CSS

My Books
ASP.NET MVC 5 With Bootstrap and Knockout.js
Knockout.js Building Dynamic Client-Side Applications
20 Recipes for Programming MVC 3
20 Recipes for Programming PhoneGap
Rapid Application Development with CakePHP