保持超大背景图像居中

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.