Thursday, January 5, 2012

Overlay with transparent background across the whole page

I have written below a simple HTML page which demonstrates how to put an overlay and also how to use a transparent background for the same. You will need 2 divs. One for the transparent background and another for the overlay content. The overlay background is yellow which is made partially transparent.
The original image used for the background of the body is available in :
http://colorfulwallpaper.net/wp-content/uploads/2011/10/A_waterfall_s_in_elevation_.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <style type="text/css">
        #overlayBackground {filter:alpha(opacity=40); /* For IE8 and earlier */}
    </style>
</head>
<body style="background-color:#ccc;">
    <div style="width:1000px;height:1000px;">
        <img src="http://colorfulwallpaper.net/wp-content/uploads/2011/10/A_waterfall_s_in_elevation_.jpg" width="1000px" height="1000px">
    </div>
    <div id="overlay" style="position:fixed;width:500px;height:500px;background:#f00;z-index:1001;top:0;margin:0 100px;"></div>
    <div id="overlayBackground" style="position:fixed;width:100%;height:100%;background-color:#ff0;background:rgba(256,256,0,0.6);opacity:0.6;top:0;z-index:1000;"></div>
</body>
</html>
Posted by at No comments:
Subscribe to: Posts (Atom)