CSS/PHP - 背景图像中移动背后的内容和要关闭屏幕

的问题是：有一个包含所有内容的包装器和一个位于顶部中心且不重复的背景图片。一切看起来都不错，直到您调整窗口大小，直到窗口大小小于内容/包装大小。

在这一点上，内容的左边缘与浏览器的左边缘对齐并且底部有一个滚动条，所以一切看起来都很好。但是，如果向右滚动，则会看到背景图像（因为它居中），实际上已移动到左侧，并且现在是屏幕的一部分，在右侧留下了一些空白区域。任何想法如何让背景图像在窗口大小变得太小时停留在屏幕上而不是左边？

2013-10-02 mmvsbg

您可以将中心值设置为50％，然后查看它的功能（可能没什么区别），也可以将媒体查询用于较小的屏幕尺寸。你展示的例子没有中心位置，只是顶部。让我知道，如果我理解正确或什么occours！ :)

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

或

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

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

2013-10-02 19:27:37

只需设置位置中心不上班，但使用媒体查询应该。（但它不适用于旧版浏览器。） –

谢谢！媒体查询是一个好主意，它的运作非常好。我希望找到一个更好，更强大的技巧，但也会这样做！ – mmvsbg

的问题是，当需要相对于卷动宽度为中心其图像被相对于居中的窗口的宽度。为了解决这个问题，你可以在你的HTML顶部创建另一个div来有背景图像：

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

2013-10-02 19:43:22

回答