CODEWITHSUNDEEP
htmlcss
coure2011
coure2011

Reputation: 42444

overlay covering whole page

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

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

Upvotes: 0

Views: 689

Answers (2)

Colton Anglin
Colton Anglin

Reputation: 461

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

Try that, i'm not sure if it works on anything but backgrounds but its worth a shot!

Upvotes: 0

Tooraj Jam
Tooraj Jam

Reputation: 1612

just change the position attribute to fixed.

Upvotes: 4

Related Questions