Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

whole frame css layer

Posted on 2009-05-08
4
Medium Priority
?
543 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

610 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