Solved

whole frame css layer

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now