Turn off whole page overlay

Question

I want to create an overlay that I will use behind the popup. But when the page scrolls down, is there no more overlay? I can use javascript to get the height of the content of the page and then apply the same height to the overlay, but is there a css based solution?

#overlay{ width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background-color:#000; opacity: .75 } 

Answer 1

just change the position attribute to fixed .

Answer 2

position should be fixed , and also to prevent stacking problems add z-index: 9999999;
demo on dabblet.com

 #overlay{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color:#000; opacity: .75; z-index: 9999999; }