Just found a new way of making the background of a div opaque using CSS opacity.The normal problem when using CSS opacity is that when you apply it to a div it makes everything in that div and its child divs transparent. And before you ask, No you cant increasethe opacity of the child element again.
So if you have a div with opacity set to 50%, everything inside that div will be set to 50% as well. If you set the opacity of the child element to 70% it will end up with a 35% opacity.
There were a few solutions recently, none of them very good, having a series of absolute positioned divs floating over each other was a popular one, another was using PNG images.
However now there is a new solution, and its very simple to implement. All you do is put position:relative on the div with the content and set overflow to hidden, then you put a second empty div inside the first, specify position:absolute;top:0;left:0; width:100%; height:100%; z-index:-1;and set the opacity of that div as whatever you want.
EG:
<html><head>
<style type="text/css">
.fade {position:relative;overflow:hidden;}
.fadebg {position:absolute;top:0;left:0;display:block;width:100%;height:100%;z-index:-1;
background:your-background;-moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;}
</style>
</head><body>
<div class="fade"><div class="fadebg"></div>
Content of fade div
</div>
</body>
</html>