Oh, that is so weird!
At least I figured out what is happening. As you discovered, when the background image is longer than the container (my test image was not, which is why I didn't see the problem in my test case), Safari aligns the bottom of the image to the bottom of the container and crops the top.
This is clearly a Safari bug and you should report it using your test case.
As far as work-arounds, I didn't have much luck! I tried using the image as the background of a full-page table, a full-page div, a floating div, and so on. All containers exhibited the same symptoms. <bear is now officially pissed off>
One possible suggestion, not without its own drawbacks:
Your background image is huge because you put all that blue background around it, expecting the browser (correctly) to just crop off what's in excess. You might consider cropping down the image to just the pertinent image, and set a background-color rule on the body to set the background color to the blue which will then fill any area that the background image doesn't cover.
(This might be a good suggestion in any case since it will allow you to down-size your background image for faster loading).
Not a great solution to your problem though, since if the user make the window smaller than the cropped background image, it'll start doing the same weirdness. But at least it'll display ok if they don't make the window too small.
Any other HTML gurus out there got any ideas for a work-around?
My professional pride forces me to continue to ponder the issue. I'll let ya know if my feeble brain comes up with anything!
bear