Question

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

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

这是我的身体代码：

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

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

我希望房子始终保持在正确的位置。

感谢

安迪

Answer 1

body { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

感谢Chris Coyier：http://css-tricks.com/perfect-full-page-background-image/

Answer 2

问题是，当您的内容不是1050px时，您的身体会不断调整大小。由于背景应用于body，因此您需要使用该值的媒体查询更改背景位置。

这样做的最佳方法是根据左值重新对齐它，您可以使用像素将其设置为比这更具体，但我不确定图像中的确切位置是否要放置

@media (max-width:1050px) {
    body {
        background:#90a830 url(img/bg.png) no-repeat left top;
        /* Possible background-position property here */
    }
}

作为前端设计师，我建议不要这样做，而是使用媒体查询来影响您的布局以响应较小的窗口大小（变得响应），但这是一个不同的问题

使背景图像保持正确定位

2 个答案: