Solved

whole frame css layer

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript: How to show value of a specific value 5 48
Split in Javascript 5 31
Message not shown 5 33
How to set a countdown by not using the PC time in PHP 36 44
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

895 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

13 Experts available now in Live!

Get 1:1 Help Now