Allow a div to cover the whole page instead of the area within the container

Question

I'm trying to make a semi-transparent div cover the whole screen. I tried this:

#dimScreen

{

    width: 100%;

    height: 100%;

    background:rgba(255,255,255,0.5);

}

But that doesn't cover the whole screen, it only covers the area within the div.

Answer 1

Add position:fixed. Then the cover is fixed over the whole screen, also when you scroll.
And add maybe also margin: 0; padding:0; so it wont have some space's around the cover.

#dimScreen
{
    position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);
}

And if it shouldn't stick on the screen fixed, use position:absolute;

CSS Tricks have also an interesting article about fullscreen property.

Edit:
Just came across this answer, so I wanted to add some additional things.
Like Daniel Allen Langdon mentioned in the comment, add top:0; left:0; to be sure, the cover sticks on the very top and left of the screen.

If you some elements are at the top of the cover (so it doesn't cover everything), then add z-index. The higher the number, the more levels it covers.

Allow a div to cover the whole page instead of the area within the container

Sign up