David Kendall

This morning I have been developing a website from a series of .psd files. The designer did something that I haven`t had to code into a website for a very long time, the navigation area had an opacity, a semi transparent layer over an image. My first thought was cross browser compatability to ensure it works in all web browsers

The last time I put transparency onto a website was back in the days when css was rarely used and was in it’s infancy. I remember utilisng a backgroudn image in the transparent area to mimic the idea of opacity, a good workaround that worked a treat. But what happens when the user expands the text size and the containing div is expanded, all goes to cock!

So, I am a few years older, a few more grey hairs on my head (still not receeding though, phew) and css has come on a long way, so have web browses I hope!

At time of writing this post, website opacity is not a w3c recommendation although it has been adopted by the major web browsers.

Mozilla and Firefox have supported css3 opacity since 2004 but our old nemesis IE had not, that is until the recent release of IE 7 .

So lets do it in our website;

• the css3 standard for setting transparency is opacity: 0.5
• Mozilla uses -moz-opacity:0.5
• IE uses their own messed up method of filter:alpha(opacity=50)

Working example

As ever we need to ensure our website is developed for all web browsers, so in our css lets style for all three variations

opacity: 0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);


This sets 50% transparency, just change the values, a lower values makes the layer more transparent. Oh and remember to set a background colour background-color: #ffffff or something to get the true effect of the transparency.