Prevent jQuery spritely panning <div> to add page length

Question

Since I have a panning ` element do to a jQuery spritely plugin method which I'm calling to pan some Super Mario Bros backgrounds, it appears to increase the page length quite a bit.

If you visit http://www.marioplanet.com you will notice that there 3 different panning backgrounds. With only 2, there isn't enough to fill the entire height of the content of the page, but with 3 panning, there is too much overflow, causing the user to be able to scroll down the page, just to see the background panning image.

What I would like to do, is to cut off the 3rd panning with the height of the last <div> element on my page, in this case, my <div id="footer"> element.

Any ideas on how I can do this? I guess I could always just make 2 backgrounds and squish my content down, but that's no fun, is it? :)

Thanks!

Answer 1

I think it would be best to wrap your background elements inside a div with the properties height(and possibly min-height) set to 100% and overflow set to hidden. If the wrapping div wich is as high as the content size is smaller than the total height of your backgrounds, the backgrounds will be clipped.