保持过大的背景图像居中

Question

我正在构建一个由4个div构成的单页网站，每个div都有自己的固定背景图像。这些图像比屏幕宽得多，因为我希望网站在各种屏幕尺寸下保持外观，但是有人知道如何真正居中背景图像吗？因此，在小型监视器上，他们将查看图像的中心，在较大的监视器上，他们将看到相同的图像位置，只是周围更多。就像这个网站一样：http://www.cantilever-chippy.co.uk/。当窗口调整大小时，背景图像会相应移动。非常感谢。

- Tim Wilkinson

---

当您为包装器设置静态宽度时，背景图像的位置也是静态的，因为宽度在每个分辨率上都相同（960px）。 - Sven Bieder

Answer 1

如果您检查链接中的CSS，您会看到解决方案：

#images #bg_1 {
  background-image: url(images/bg/1.jpg);
  background-position: 50% 0;
}

还有这个div：

<div class="bg_block" id="bg_1" style="height: 1200px; width: 1055px;"></div>

通过 JavaScript，他们在每次调整大小时改变 #bg_1 的宽度。

window.onresize = function(event) {
    $("#bg_1").css("width", $(window).width());
}

- Sam

---

谢谢您的回复，但我应该在上面提到我已经尝试了所有CSS定位图像的方法，但它总是将它们对齐到左上角，令人沮丧！ - Tim Wilkinson

好的，我明白了，他们会根据页面大小的变化来更改div的宽度。我会编辑我的帖子。 - Sam

Answer 2

这应该可以正常工作

#bg{ 
   background-image:url(yourURL);
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-position:center; 
}

background-fixed 属性适用于 Firefox 和 Opera 浏览器。

- hobberwickey

Answer 3

你正在寻找CSS属性中的background-position。

http://www.w3schools.com/cssref/pr_background-position.asp

它可以采用像素的绝对偏移量（因此，如果您知道图像的大小和div的大小，则可以精确计算出要显示的位置）。或者，您可以传入一个百分比。它还可以采用负数，因此您可以将其向任何方向偏移屏幕。

但是，对于您的情况，您可能需要简单的“中心”值。像这样的东西应该可以工作：

/* This should center the background image in the div. */
div.background_image_block {  
  background-position: center center;
}

- GSP