Why does background stop after 1st 'page' when my page needs a vertical scroll bar?
I tried using jquery to fade the background of my body in and out. After finding out that was开发者_开发百科 impossible (right?) I moved the background image to a div, so I could fade that out.
<body>
<div id="background">
</div> ...
Sinde I don't want my content to fade, I kept it seperate (not containing) and slapped 'position:absolute' on it. It works fine when my page is viewed without vertical scroller. This is the CSS that's on the 'background' div:
#background {
position:absolute;
height:100%;
width:100%;
background-image:url('bin/achtergrond.png');
background-position:center bottom;
z-index:-1;
}
So the problem is, when I ctrl+zoom or make the window smaller or view it on a small screen, my background doesn't continue after scrolling. I understand why this happens (because the position:absolute doesn't let it interact with the content and it doesn't know how high it all is, but I don't know how to fix it.
You can play with it here: http://demensentuin.be/indexgeheim.php
Ctrl+scroll to zoom in, scroll down: background fail :(
Thanks!
Rather than set the height and width, set the coordinates, and have the position fixed.
#background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
That should allow it to stay in place when the content is scrolled over it, and it'll also cover the entire viewport at all times.
加载中,请稍侯......
精彩评论