I have a main <div>
which is centered on the screen and the height is the total size of the viewport height.
When I resize the browser it works fine, but if I have content below the visible browser window and need to scroll down, the <div>
becomes static and assumes the size it had when it was scrolled.
What needs to be changed here so that the container <div>
resizes properly when scrolling?
.container1 { width:80%; height:100%; -webkit-box-shadow: 0px -1px 18px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px -1px 18px 1px rgba(0,0,0,0.75); box-shadow: 0px -1px 18px 1px rgba(0,0,0,0.75); position:absolute; left:10%; border:1px; top:0px; border-style:solid; border-color:black; background-image: url(../img/albg.png) ; background-repeat:no-repeat; background-position:inherit; background-size:auto; z-index:-2; }