css - 绝对真实的居中背景图片

Question

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

背景居中很好，直到浏览器窗口无法适应网站的宽度，此时背景有点左对齐。

这是我的 body 代码:

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

图像弹出窗口从 bg 图像上的正确位置弹出。尝试缩小浏览器窗口，您会明白我的意思，背景移动不对齐。

谢谢

安迪

Answer 1

将背景左侧设置为 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;
}