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 */
Advertisements

10 Responses to CSS – full screen overlay layer

  1. steve88 says:

    This really helped me, thank you.

  2. Thank you, works perfectly.

  3. Lotfi M. says:

    Thank you maanehunden, it helped me a lot

  4. Mike says:

    Just what I needed, thank you!

  5. Tim says:

    there is a slight bug in iphone safari. when you scroll down the page it drags up a bit of white space. when you let go your finger off the screen, the white space is then filled by the overlay again and it looks fine.

    anybody have a solution?

  6. Tim says:

    update: its the safari top header address bar height that causes problems.

    by putting bottom value to “bottom:-60px” it seems to fix it 🙂

  7. Lado Lomidze says:

    You have no idea, how thankful i’m for this post.
    I never thought, that position fixed, not absolute, would be perfect solution for my problem.
    God bless you!
    😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: