Single image background move fixed to height of page

[lab5]

Hello all, I'm after some help.

I have a moderate length one page design website. I have an image background from a poster that I would like to fit the width of the page, but then scroll as a % of the height of page.

ie the page loads and the background image is say 20% of its height visible, as the user starts to scroll, and reaches the bottom of the web page, the background image is then fixed at the bottom. However, the web page and the background image are not the same size. The only requisites are that the background image fits full width of the web page, and that when at the top of the page, the background image is at the top and when the page is scrolled to the bottom, the image is at the bottom of its scroll.

So for instance a 1200x800 image on a desktop page that is 1200x1600 would need to scroll at a 50% speed so that it fits the above requirement. These are made up dimensions.

[Ingolme]

CSS wouldn't be able to do it. You will need to do some math and write a Javascript program to determine where to place the image. It takes some work so there's no short code snippet that could be provided.