将Bg图像保持在屏幕中心

Question

我想保持我的bg图像居中，无论用户的显示器是否足够大以适应整个事物或太小而无法一次显示它。同样，当用户使用ctrl +放大时，它应保持水平居中。问题最好用图像说明。这是一个缩小的镜头，这是正确的行为：

这是一个放大镜头，这是不正确的。背景显示左边距，并在右侧切断100％。它应该从左侧和右侧均等地切断：

最后这里是示例页面，因此您可以自己放大和缩小：

http://pastehtml.com/view/b3qfjcghu.html

谢谢！

Answer 1

你似乎给容器增加了图像的大小，所以实际上它从来都不是'居中'，因为它始终适合整齐。

如果您将其用于#container：

width: 100%;

然后它将使用屏幕的整个宽度，以便背景将根据屏幕尺寸居中。

http://jsfiddle.net/pimvdb/AxzdP/

---

或者，正如Artfunkel建议的那样，您可能只想使用body元素而不使用任何容器。

body {
    background: url(http://i.imgur.com/7JUFb.jpg) no-repeat;
    background-position: center 0%;
}

---

您还可以创建一个单独的容器，如下所示：

<div id="bgcontainer"></div>

使用：

#bgcontainer {
    width: 100%;
    height: 1000px;
    background: url(http://i.imgur.com/7JUFb.jpg) no-repeat;
    background-position: center 0%;
    z-index: -999 /* keep on background so that other elements are above it */
}