CSS: Fixed background images taller than the browser viewport

Question

I've got a large photo (940x1210) as the background image for a #page div which wraps around all the content on a site. Since the photo is a headshot, it looks pretty silly tiled, so I've set it not to repeat, and positioned it at 0,0.

When the content enclosed by #page is taller than 1210px and the background image is set to scroll, the photo scrolls out of view, but if it's fixed, only the part of the image displayed initially in the browser viewport shows up- either the top half (fixed top left) or bottom half (fixed bottom left).

Here's the question: how can I fix the background image to the bottom of #page (or the body) while scrolling through the full height of the image until I get to the bottom?

Answer 1

Since you want to change the behaviour of the background image as a user scrolls, you'll need to use an onscroll Javascript event.

Start with the background image attached at the top and set to scroll. As the user scrolls, test if they've scrolled more than the height of the image. As soon as they have, set the background image to fixed position.

Then if the user scrolls back up to less than the height of the image, set the background to scroll again.