Website Background - 3 Images; Top, Middle, Bottom

[Guest MorningCoffee]

Hey friends. :)I am currently trying to create a centered, fixed width website around 970 px wide. I would like to have 3 scrolling background images either side of the 970 px wide content div, one at the very top, one at the bottom, and one in the middle that will repeat downwards. The simplest way I can put it is that I'm going for the clouds, the ground, and the sky to fill the rest of the background depending on how long the page is. Problem is, I can't figure out how to do this. I know it's possible in CSS3, but the uptake isn't really large enough at the moment for it to be relied upon in production websites. I've tried various workarounds such as using the Z index, wrapper divs etc. But I just can't get any of them to work. Could anyone offer a workable, crossbrowserish solution? Many thanks in advance.

[PlaviZG]

Hey friends. :)I am currently trying to create a centered, fixed width website around 970 px wide. I would like to have 3 scrolling background images either side of the 970 px wide content div, one at the very top, one at the bottom, and one in the middle that will repeat downwards. The simplest way I can put it is that I'm going for the clouds, the ground, and the sky to fill the rest of the background depending on how long the page is. Problem is, I can't figure out how to do this. I know it's possible in CSS3, but the uptake isn't really large enough at the moment for it to be relied upon in production websites. I've tried various workarounds such as using the Z index, wrapper divs etc. But I just can't get any of them to work. Could anyone offer a workable, crossbrowserish solution? Many thanks in advance.

make a table with 3 rows. put 3 backgrounds in 3 rows. use z-index on the table. make one div with a higher z index on top of everything.