css - how to make this background work?

[Scam]

I've been slowly putting together a site for a friend of mine and he's sent through a replacement background (he did originally want flash/video as the background, eek!). He's mocked it up as below, but I'm just wondering what would be the best way to implement it?



Height/length is no problem as it will be static, but I'm just wondering about the best way to make it work for users with ultra-wide screens (etc.)? Any recomendations? Surely using a 3000px image as a background is not going to go down well!

Thanks!

 

[Scam]

Thanks guys, I think I'll try the non-CSS3 (last link) method. I'll see how I go.

I'm a bit out of the loop to be honest, how well is CSS3 supported now?

 

[Scam]

Ah, dont ask me why but for some reason I'm still running FF 3.6. I was looking back at this thread wondering why I couldnt see any backgrounds on the link FabienO posted! (http://www.fabieno.com/27).

I've just realised the massive version of the background I requested from the client continues with a gradient from white in the middle, all the way to practically black. Nowhere to 'stop' it for tiling, without it looking obvious. Time to do some quality control

EDIT: Quick question; is using two images as a background a CSS3 thing? I was setting the tiling on the html element, and then the radial splash thing on the body. But then thought why not just do this:

background: url('img/backgrounds/radial-bg1.jpg') no-repeat top center, url('img/backgrounds/g2-tile1.gif') repeat top center;

as suggested above. Which is the most friendly to the most browsers?

Now my problem is that my tiles dont lineup with the main picture and I don't know why