1

The issue is a bit problematic to create a fiddle but I found a template that has a similar problem: http://www.elegantthemes.com/demo/?theme=StudioBlue

The issue is the following: there's a wrapper that has all the content inside of it and a background image positioned at the top center with no-repeat. Everything looks fine, until you resize the window until the window size is smaller than the content/wrapper size.

At this point everything still looks fine as the left edge of the content is aligned with the left side of the browser and you get a scroll bar at the bottom. However, if you scroll to the right you'll see that the background image (since it's centered), actually moved to the left and is now partially of the screen, leaving some blank space to the right. Any idea how I can trick the background image to stay on the screen instead of going off the left side when the window size becomes too small?

4

2 回答 2

2

您可能可以将中心值设置为 50% 并查看其作用（可能没有什么不同），或者您可以将媒体查询用于较小的屏幕尺寸。您显示的示例没有中心位置，只有顶部。让我知道我是否理解正确或发生了什么！:)

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

或者

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

         background: gray url(img.jpg) left top;
    }
}
于 2013-10-02T19:27:37.093 回答
1

问题是当图像需要相对于滚动宽度居中时，图像相对于窗口的宽度居中。要解决此问题，您可以在 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

于 2013-10-02T19:43:22.067 回答