Solved

whole frame css layer

Posted on 2009-05-08
4
540 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 500 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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

691 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