创建
小提琴的问题有点问题，但我发现了一个有类似问题的模板：http://www.elegantthemes.com/demo/?theme=StudioBlue
问题如下：有一个包装器，里面有所有内容，背景图像位于顶部中心，没有重复。一切看起来都很好，直到您调整窗口大小，直到窗口大小小于内容/包装器大小。
此时，一切看起来仍然很好，因为内容的左边缘与浏览器的左侧对齐，并且在底部有一个滚动条。但是，如果您向右滚动，您会看到背景图像（因为它居中）实际上向左移动，现在部分位于屏幕中，在右侧留下了一些空白区域。知道当窗口尺寸变得太小时，我如何欺骗背景图像留在屏幕上而不是离开左侧吗？
您可以将中心值设置为 50% 并查看其作用（可能没有什么不同），或者您可以将媒体查询用于较小的屏幕尺寸。您展示的示例没有中心位置，只有一个顶部。让我知道我是否正确理解或什么OCOURS！:)
background: gray url(img.jpg) 50% top;
或
@media screen and (max-width:480px) {
body {
background: gray url(img.jpg) left top;
}
}
问题是，当图像需要相对于滚动宽度居中时，图像相对于窗口的宽度居中。要解决此问题，您可以在 html 顶部创建另一个div 以拥有背景图像：
#image-div {
position: absolute;
min-height: 100%;
width: 100%;
background: #000 url('image.jpg') no-repeat center top;
}
相关：https://stackoverflow.com/a/15792723/1721527