Cross Browser CSS Background Transparency

In a nutshell, this is what I used to achieve somewhat cross browser css background transparency:

#content {
        background-color: rgba(255,255,255,0.3);

Then, you’ll of course need to make an exception for stinkin IE:

<!--[if IE]>
   <style type="text/css">
    #content {
        zoom: 1;

In the case above, I’m using Microsoft’s gradient, but just going to and from the same color. I’ve wrapped the rule in an if statement and this goes somewhere in after the rest of your CSS has loaded.

I’ll need to do more testing on versions this works with, but for most non-ancient browsers, this works. Looks easy now, but taking so long to get this far, I’m writing this down before it goes down the memory hole and I’m stuck having to figure it all out again.

Special thanks to the following posts, and especially the first on this list:

That’s it for now. This is how I’m getting cross browser css transparency on elements without the transparency being applied to the content.

Edit: Now that I have of course written blog post about this I’m coming across a ton of similar work. Below is a Smipple from joost.kiens which is much simpler that my solution (all styling is handled in a single element without the need for isolating IE):

.rgba {
  background-color: transparent;
  background-color: rgba(200,200,200,0.8);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)";

The code snippet above is from Smipple and is titled Crossbrowser background transparency.

Post written by Ed Reckers

Founder and lead web development consultant at Red Bridge Internet : San Francisco WordPress Developers and Consultants.

One Response to “Cross Browser CSS Background Transparency”

  1. Pete

    Thanks for the article. It’s great to have reference for these sorts of things.

Leave a Reply