Centered background gets cropped in html

Centered background gets cropped in html

I'm having a problem trying to center a background horizontally in the
following situation:
background is large and has to be centered horizontally
the page has a minimum width of 960px and there has to be a scrollbar on
smaller screens
So i've decided to do this (pseudocode):
<bg-div> # this will contain the background image with "center center
no-repeat" option
<content-div> # this will be 960px margin 0 auto
</content-div>
</bg-div>
Live example: http://jsfiddle.net/CtMRt/4/
The problem: The background should stop centering itself on smaller than
960px resolutions, but instead a white gap appears on the right side of
the page and the background keeps centering itself. How would i solve
something like this?
Thanks for your thoughts