I'm building a website with a 960px design, but the designer has also requested that the page have a *full*-width background photo across it. He has supplied a 2000px image for this.

However, trickily, part of the photo is integral to the navigation of the page, so the image needs to be centred. So I want the left and right edges to overflow out of the viewport. I've tried to do this using CSS, but have failed.

I could do a javascript version to adjust the left margin based on the viewport when the document loads and the window is adjusted, but I expect it may perform badly, particularly on the adjustment. A lot of the target audience of the site have some serious legacy hardware, so will be using slow computers running IE6. Is there a good CSS way of doing this which would perform better?

UPDATE: Sorry, I wasn't very clear in terms of the "full-width" thing. The content of the site is all restricted to a 960px column, *except* this particular image, which should be the full-width of the browser window, even if it is greater than 960px. Using background-position is the method which I've already tried, but if I size the particular div to 2000px wide, then I haven't been able to center the div, whereas if I set it to 100% the background-position:center doesn't seem to work