How do I create a transparent background?

There are a few methods available to create transparent backgrounds in your pages. These methods all have tradeoffs of course.

RGBA color

My preferred approach is using rgba color. That’s Red-Green-Blue-Alpha. The alpha channel defines transparency. For example

.wrapper-content {background-color: rgba( 255, 255, 255, 0.5);}

In the above example, we declare a white background at one-half transparency. The disadvantage to this approach is that IE6-8 won’t recognize it, so you need to declare a background color for IE that isn’t transparent.

.wrapper-content {background-color: #FFFFFF;background-color: rgba( 255, 255, 255, 0.5);}

IE will display a white background because it does not recognize rgba() as a color definition, so it ignores this declaration. Modern browsers will use the rgba() color definition.

Sandeep Kumar

Sandeep kumar is a web developer and a professinal blogger. He works for latest technologies and write articles what he learn. In ICodeHub he share web languages tutorials and other programming tips and tricks. if you need some help or have some suggestion then mail him at sandeep92pal@gmail.com without any hesitation. He believes in learning and sharing.