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.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members