绝对真实的中心背景图像

时间:2014-02-12 11:52:21

标签: css background background-image

o我有一个网站,其中居中的背景图片在主页动画中起着至关重要的作用。

背景中心很好,直到浏览器窗口无法适应网站的宽度,此时背景类型左对齐。

这是我的身体代码:

body {
line-height:1;
margin:0px auto;
padding:0px;
background:#90a830 url(img/bg.png) no-repeat center top;
}

图像弹出窗口从bg图像上的正确位置拍摄。尝试使浏览器窗口变小,你会看到我的意思,bg移动不对齐。

谢谢

安迪

2 个答案:

答案 0 :(得分:0)

将背景左侧设置为50%,将背景边距左侧设置为0减去背景宽度。这样,它将始终在浏览器窗口的水平中心显示图像的水平中心。

请参阅我的JSbin演示here。我重复使用你的图像,所以下面的其他示例图像看起来很奇怪!

CSS:

body {
  line-height:1;
padding:0px;
  margin-left:-575px; /* half your background image width */
  background:#90a830 url(http://www.apb-media.co.uk/uploads/background.jpg) 50% top;
}

答案 1 :(得分:0)

使用您发布的代码,背景图像将始终以屏幕为中心。在小屏幕上,你希望房子是中心屏幕;但这只有在房屋位于图像中心时才会发生。因此,如果可能的话,我的建议是在图像的每一侧都有相同数量的绿草,这样房屋就在图像的中心。那你就不会遇到这个问题。

如果您无法更改图像,并且房屋的中心位于图像中心左侧240px处,您可以使用以下内容将房屋置于屏幕中心:

body {
    background: url(bg.png) calc(50% + 240px) 0 no-repeat;
}

如果您不希望图像在更宽的屏幕上偏离中心,或许您可以在@media规则内使用较小的屏幕。