whole frame css layer

Hi,

I'm trying to make a shade layer that will fill the whole page (even when scrolled down) with transparent black color.

I found this code (css only) I applied it to a div buy it isn't working.
Thank you.
#darkenBackground {
	background-color: rgb(0, 0, 0);
	opacity: 70%; /* Safari, Opera */
-moz-opacity:0.70: /* FireFox */
filter: alpha(opacity=70); /* IE */
	z-index: 400;
	height: 100%;
	width: 100%;
	background-repeat:repeat;
	position:absolute;
	top: 0px;
	left: 0px;
}

Open in new window

dvirAdvAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Chad HaneyConnect With a Mentor Chief Technology OfficerCommented:
There is a colon after the FireFox opacity filter.  (-moz-opacity:0.70: /* FireFox */)  Change the one after the 0.70 to a semi colon.

Also to cover the whole page you will want to express the html and body as 100% width and height, as well as any other tag that this div may end up being contained within (probably want it directly under the body tag)
<html>
<head>
<style type="text/css">
html,body{
	height:100%;
	width:100%;
}
#darkenBackground {
        background-color: #000;
        z-index: 400;
        height: 100%;
        width: 100%;
        position:absolute;
        top: 0px;
        left: 0px;
        opacity:0.70; /* Safari, Opera */
	-moz-opacity:0.70; /* FireFox */
	filter:alpha(opacity=70); /* IE */
}
</style>
</head>
<body>
<div id="darkenBackground">hi</div>
</body>
</html>

Open in new window

0
 
Maverick_CoolCommented:
put html code

0
 
Chad HaneyChief Technology OfficerCommented:
Did this solution work for you or are you still having issues with the shaded div not working properly?
0
 
Maverick_CoolCommented:
IT SHOULD WORK....
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.