如何居中背景div？

Question

我想要的是

两个div:页面主体(1)和背景块(2)

• 背景块总是(2560 x 780)px
• 页面主体宽度为820px,高度可变
• 背景块应该在页面正文后面
• 背景块和页面正文都应居中
• 调整窗口大小时,背景块不应相对于页面主体移动(即使是1个像素!)
• 对于背景块,不应出现水平滚动条
• 背景块位置不固定

约束

• 没有JS
• CSS2首选

我尝试了什么

页面正文CSS:

#pageBody {
    width: 820px;
    margin: 0 auto;
}

背景块CSS:

1.一个整页div,显示以CSS为中心的背景

<div id="backgroundBlock"></div>
<div id="pageBody">
</div>

#backgroundBlock {
    background: no-repeat center 0 url(bg.png);
    width: 100%;
    height: 100%;
    position: absolute;
}

但是当窗口的大小是奇数时:

• CSS背景在左侧移动了1个像素
• Internet Explorer上的背景图像显得模糊

2.重新定位的儿童div

• 使背景块成为页面主体的子项(以居中为中心)
• 使背景块定位绝对(将其置于页面主体后面)
• 使用负边距重新定位背景块
• 使背景块溢出:隐藏以防止该div出现滚动条

<div id="pageBody">
    <div id="backgroundBlock"></div>
</div>

#backgroundBlock {
    background: no-repeat url(bg.png);
    width: 2560px;
    height: 780px;
    position: absolute;
    margin: 0 0 0 -870px;
    overflow: hidden;
}

但问题是:滚动条出现在背景块中 ......