Check out the following link to view the issue: http://jsfiddle.net/7zb6P/1/
In a scrolling div, both the yellow box and the background image are centered, however their centers appear slightly different. The discrepancy seems to be because the background is centered to the entire area (including scrollbar), while the div is centered to the content area (excluding scrollbar). You can see it centered correctly without the scrollbar here: http://jsfiddle.net/7zb6P/2/
Interestingly, IE7 displays it accurately, but IE8+ and other browsers render it as mentioned above.
I've tried adjusting the background-origin property, including -webkit-background-origin, but none of the options seem to resolve the issue.
Any suggestions on how to address this problem?
EDIT: Additional context - The provided fiddle serves as a basic example of the issue. In reality, I encounter this problem across multiple websites where the div is centered (using margin:0 auto) with a background image centered (using background-position: center top). As I cannot modify the HTML on many of these sites, I require a solution based on CSS (or potentially JavaScript) to ensure compatibility. Thank you.