Solved

whole frame css layer

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Wordpress and Wufoo 1 39
tiled banner 2 12
[form-control] Retain values after a POST action 21 33
Can anyone help me find this preloader? 51 42
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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 full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

749 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