保持超大背景图像居中

我正在构建一个由4个div构成的单页网站，一个在另一个上面，每个网站都有自己的固定背景图像。图像比屏幕宽得多，因为我希望网站能够在大范围的屏幕尺寸上保持它的外观，但是没有人知道如何真正地将背景图像居中。因此，在一个小型显示器中，他们将查看图像的中心，而在一个更大的显示器中，他们会看到图像的相同位置，只是显示更多。就像这个网站有保持超大背景图像居中

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

当窗口大小的背景图像相应地移动。

很多谢谢。

来源

2012-12-12 Tim Wilkinson

当你给你的包装一个静态宽度，背景图像的位置也是静态的，因为宽度是在每个分辨率相同（960px）。 –

如果您检查您的链接的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()); 
}

来源

2012-12-12 13:31:06 Sam

谢谢你的回复，但我应该在上面提到过，我已经尝试了所有定位图像的css方法，它总是让它们左对齐，令人沮丧！ –

好吧，我明白了，它们会随着页面大小的变化而改变div的宽度。我编辑我的帖子。 – Sam

您正在寻找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; 
}

来源

2012-12-12 13:31:40 GSP

这应该工作

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

背景固定属性是Firefox和Opera。

来源

2012-12-12 13:33:54 hobberwickey

保持超大背景图像居中

回答

相关问题