大中心背景图像

Question

我正在构建一个960px设计的网站，但设计师还要求该网页上有一个完整的 -width背景照​​片。他为此提供了2000像素的图像。

然而，巧妙的是，部分照片是页面导航的组成部分，因此图像需要居中。所以我希望左右边缘溢出视口。我试图用CSS做到这一点，但都失败了。

当文档加载并调整窗口时，我可以使用javascript版本根据视口调整左边距，但我预计它可能会表现不佳，特别是在调整时。该网站的许多目标受众都有一些严重的遗留硬件，因此将使用运行IE6的慢速计算机。是否有一种很好的CSS方式可以做得更好？

更新：对不起，我对“全宽”的事情并不是很清楚。该网站的内容全部限制为960px列，除了此特定图像，即使它大于960px，也应该是浏览器窗口的全宽。使用background-position是我已经尝试过的方法，但是如果我将特定的div调整为2000px宽，那么我无法将div放在中心，而如果我将它设置为100％的背景位置：中心似乎不起作用

Answer 1

你能做到这一点的一种方法是使用background-position: center top;，将2000px图像作为背景放到960px div中，如下所示：

DEMO

据我所知，IE6 +支持

Answer 2

只需使用背景定位。

body {
    background: url(blah.jpg) center top no-repeat;
}

Answer 3

在图片上尝试这样的事情：

position: absolute;
left:50%;
margin-left:-1000px; /* half the width of the image */

但是，如果图像的一部分将用于导航，并且它具有固定的2000px宽度，那么我将来会看到很多眼泪。

考虑将图像划分为可以单独操作的图层。

编辑：正如迈克尔所说，这种方法并不好。