Full 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

 -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; 

Try it, I'm not sure if it works on anything except the background, but it's worth it!