Webistrate - Draw Your Own Conclusions

CSS3: Creating a Transparent Background

Posted by Jamie Munro | February 20, 2012 | Tags:


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 value so that the content or image beneath will be visible through it.

 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.


Related Posts

Leave a Reply

You must be logged in to post a comment.

Buy one of my books