We are Red Bridge Internet, local San Francisco WordPress Developers and WordPress Consultants in San Francisco. We're the ones you have been searching for. Request a Project Quote or call us at 415.857.5745.

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 {
        background:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#44FFFFFF,endColorstr=#44FFFFFF);
        zoom: 1;
    }
   </style>
<![endif]-->

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);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)";
}

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

One Response to “Cross Browser CSS Background Transparency”

  1. Pete says:

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

Leave a Reply