Is it possible to overlay the entire webpage with a 50% opaque black div?
I attempted to achieve this by creating a fixed position div at the top of the script with 100% width and height and a z-index of 1. However, this method prevents me from placing another non-darkened div in front that can scroll.
My CSS code snippet was as follows:
#dark_cover{
width: 100%;
height: 100%;
z-index: 1;
background-color: #000;
position: relative;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.5);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
Despite setting the z-index to 100, most of the page remained unaffected and the dark cover only covered the original viewport area. It did not extend to the bottom of the page when scrolling, even though the div spanned from top to bottom.
Any suggestions on how to accomplish this?
UPDATE:
The dark_cover div must be placed above all other elements on the page. Think of it as adding a semi-transparent dark layer over an existing page, with an additional div containing some content placed on top of it.
Shouldn't setting the z-index to 10 place it above all other elements (assuming no conflicting z-index values)? Unfortunately, that's not the case, as it only appears above certain background divs and not the entirety of the page.
I also tried using position:absolute with left, top, right, and bottom set to 0, but the issue persisted where the div only covered the original viewport size and didn't expand when scrolling.