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

后台固定属性适用于Firefox和Opera。

Answer 3

您正在寻找background-position CSS属性。

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

保持超大背景图像居中

3 个答案: