You can set up a body css class that has an image as the background (create an image in photshop or any graphics program that has a glass ripple effect or whatever pattern you want, i don't know if this can be created using css i only know how to do it with an image) then create a div with the opacity and colour screen that you require.
Opacity css codes work differently for different browsers:
For mozilla and webkit browsers (works in firefox, google chrome, safari, opera):
opacity:0.6;
for IE:
filter:alpha(opacity=60);
css:
body {background-image:url('images/myimage.jpg'); background-repeat:repeat-x;}
div.wrapper {position:fixed; top:0px; left:0px; bottom:0px; right:0px; opacity:0.6; filter:alpha(opacity=60); background-color:#ffff00;}
You can change the positioning or add a height and width to the wrapper div if you do not want it to fill the entire page and the repeat on the image as required.
html:
<html><body><div class="wrapper">Add all you page content here</div></body></html>
The "opacity:0.6" is a css 3 element so you may find that even though it works you code may not validate but it is properly formed css just new.
Hope this helps.
