IE Transparent Backgrounds

This is a quick post that explains a technique for achieving semi-transparent backgrounds across all the main browser players, including Internet Explorer down to IE6. Part of a design I was recently working called for this so I thought I’d share my findings.

I needed to pop up a modal window on a page and dull the rest of the page content whilst this modal box was in action. The way I decided to do this was by having the modal box wrapped in an element that would cover the rest of the page and would have a semi-transparent black colour to dull the rest of the content.

Sounds pretty simple. It is, for modern browsers that is. For browsers that support rgba colour declarations it is a cinch. You just need to set the background colour of the parent wrapper element using rgba.

#cloak {
    background: rgba(0,0,0,0.5);
}

However, as you probably know already, this will not work in IE (IE9 maybe but not the ones used by so many unfortunate souls). Never fear it is achieveable, even in IE6. Lots of people suggest using opacity but problems can occur when the opacity setting is inherited by the child elements. I didn’t want the modal box to be semi-transparent too.

Below is what I ended up using to get it working in IE6-8

#cloak {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000)";
}

It uses the the gradient filter to demonstrate how similar the IE way can be to the rgba way used in modern browsers. You’ll notice that the hex colors used have 8 digits not usual 6. This is because the first 2 digits act of the alpha channel. Therefore instead of the last parameter of the rgba declaration IE uses the first part of a hex color. Another difference is that one asks accepts values 0-1 whilst the other accepts a hex value.

How do you turn your alpha value into a hex value? You can use a simple bit of code like this:

Math.floor(alphaV * 255).toString(16);
// where alphaV is the alpha value you'd 
// use in your rgba declaration

Now that we’ve got that all sorted out we can put it all together to get the complete cross browser solution:

#cloak {
    /* Fallback for browsers that doesn't support rgba */
    background: rgb(0, 0, 0) transparent;
    /* rgba with 0.6 opacity */
    background: rgba(0, 0, 0, 0.5);
    /* For IE 5.5 - 7 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000)";
}

Hope that was a handy tip for someone. If you know of a better way of doing it or if I have made a mistake please add them to the comments below.