View Full Version : Multi layered scrolling background (sunrise effect)

05-14-2011, 03:47 PM
Hi all,

I need some help with a little test I'm doing for creating a sunrise effect when the user is scrolling a page.

For an example see: http://www.vassal.nl/dawn-test/index.htm

Now this works nice as long as the page has enough content to display a scrollbar. If there is little content the body div doesn't stretch over the whole window height, see http://www.vassal.nl/dawn-test/index2.htm.

That can be easily fixed ofcourse (see url and click "load stylesheet for Fixed landscape"), but the way I did it breaks the scrolling page.

The effect I'm trying to create depends on three divs:

first div has full content height, minimum window height and has a fixed bg
second div has full content height, minimum window height and is aligned at the bottom of content
third div has full window height and is fixed at the bottom

The issue now is that the background of the third div is fixed, but when scrolling the div itself moves upwards, thus making the background dissapear.

Can anyone think of a nice and solid solution to fix this?
I'm guessing that it's probably very obvious, but I need to be feeded with some ideas

For source files see http://www.vassal.nl/dawn-test.zip