?
Solved

whole frame css layer

Posted on 2009-05-08
4
Medium Priority
?
542 Views
Last Modified: 2012-08-13
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

0
Comment
Question by:dvirAdv
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 7

Expert Comment

by:Maverick_Cool
ID: 24335367
put html code

0
 
LVL 12

Accepted Solution

by:
Chad Haney earned 2000 total points
ID: 24395717
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
 
LVL 12

Expert Comment

by:Chad Haney
ID: 24494499
Did this solution work for you or are you still having issues with the shaded div not working properly?
0
 
LVL 7

Expert Comment

by:Maverick_Cool
ID: 24494585
IT SHOULD WORK....
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question