Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Creating a glass effect

1:50 pm on Aug 13, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:May 6, 2008
votes: 0

I'd like to simulate glass using a div with opacity over an image background. Anyone have any experience with this?
9:55 am on Aug 18, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Apr 28, 2009
votes: 0

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):
for IE:

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><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.