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 want some elements to be 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.