CSS – full screen overlay layer

Often when you display a gallery of pictures, you want to dim the website in to the background. I have tryed implementing several solutions based on placing a html element on top of all the others by setting position to absolute, and height and width to 100%. That worked ok as long as the page was no bigger than the screen. But when i scrolled the page i noted that my absolute layer was attached to the top of the page,.. so it scrolled with the page,.. so that was clearly not the way to go,..
So here’s what i came up with to solve this,..

.dim
{
			height:100%;
			width:100%;
			position:fixed;
			left:0;
			top:0;
			z-index:1 !important;
			background-color:black;
}

and it worked as a charm,.. position fixed did the trick,. woohoo,..
to make this overlay more fancy you can add opacity to it by setting a
semitransparent png pixel to the background(works in most browsers)
or do it the old fashioned way

filter: alpha(opacity=75); /* internet explorer */
-khtml-opacity: 0.75;      /* khtml, old safari */
-moz-opacity: 0.75;       /* mozilla, netscape */
opacity: 0.75;           /* fx, safari, opera */

Advertisement