css - 使超大背景图片居中

Question

我正在构建一个由 4 个 div 构成的单页网站，一个在另一个之上，每个都有自己的固定背景图像。这些图像比屏幕宽得多，因为我想在各种屏幕尺寸上保持其外观，但是有谁知道如何真正居中背景图像。因此，在小型显示器中，他们将看到图像的中心，而在较大的显示器中，他们将看到图像的相同位置，只是周围更多。就像这个网站有

http://www.cantilever-chippy.co.uk/

调整窗口大小时，背景图像会相应移动。

非常感谢。

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());
}

Answer 2

这应该工作

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

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

Answer 3

您正在寻找background-positionCSS 属性。

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;
}