Question

创建小提琴时问题有点问题，但我发现了一个类似问题的模板：http://www.elegantthemes.com/demo/?theme=StudioBlue

问题如下：有一个包装器，其中包含所有内容，背景图像位于顶部中心，没有重复。一切都很好，直到你调整窗口大小，直到窗口大小小于内容/包装大小。

此时所有内容仍然看起来很好，因为内容的左边缘与浏览器的左侧对齐，并且底部有一个滚动条。但是，如果向右滚动，您将看到背景图像（因为它居中），实际上移动到左侧，现在部分是屏幕，在右侧留下一些空白区域。我知道如何在窗口尺寸变得过小的情况下欺骗背景图像而不是离开左侧？

Answer 1

你可以将中心值设置为50％并查看它的作用（可能没什么不同），或者你可以使用媒体查询来缩小屏幕尺寸。您显示的示例没有中心位置，只有顶部。如果我理解正确或发生了什么，请告诉我！：）

background: gray url(img.jpg) 50% top;

或

@media screen and (max-width:480px) {
    body {

         background: gray url(img.jpg) left top;
    }
}

Answer 2

问题是当图像需要相对于滚动宽度居中时，图像相对于窗口的宽度居中。要解决此问题，您可以在html顶部创建另一个div以获得背景图像：

#image-div {
    position: absolute;
    min-height: 100%;
    width: 100%;
    background: #000 url('image.jpg') no-repeat center top;
}