背景图像在狭窄的页面上被向右推
我有一个 background-image 用于将页脚与主要内容分开。当在宽度大于页面支持的 min-width 的浏览器窗口中查看时，它显示正常。但是，如果将窗口大小调整得更窄，则图像相对于主体会被推到右侧。
它如何在宽浏览器窗口中显示：
它如何在窄浏览器窗口中显示：
我可以将主体内容设置为不直接向上推到窗口左侧，而是在窄屏查看时保留 30 像素边距吗浏览器窗口？
如果 CSS 有帮助的话，该页面位于此处。
I have a background-image used to separate my page footer from the main content. It displays fine when viewed in a browser window wider than the supported min-width of the page. However, if the window is resized to be narrower the image is pushed to the right relative to the main body.
How it displays in wide browser windows:
How it displays in narrow browser windows:
Can I set the main body content not to push right up against the left-hand side of the window, but rather keep the 30 pixel margin when viewed in a narrow browser window?
The page is live here if the CSS will be helpful.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
是的，您应该为
指定min-width。在你们的网站上，1000 以上一点就可以了，但我没有确切的值。可能是丝带的确切宽度。-编辑-
功能区（1000px）+边框（2 * 1px）= 1002px，应该可以了。
Yes, you should give the
<body>amin-width. Just a little above 1000 works for me on your website, but I don't have an exact value. Probably the exact width of the ribbon.-edit-
ribbon (1000px) + border (2 * 1px) = 1002px, that should do it.
问题是您的 #footerTop 和 #footer 太大并且正在响应窗口缩小。我解决这个问题的方法是将背景添加到 #footerContainer 中。如果将其对齐到中心，它将始终有效，因为 #footerContainer 没有固定宽度。
这也意味着当浏览器窗口大小调整为 999 像素宽时，您将不会看到水平滚动条。这完全取决于您希望窗口能开多小
The problem is that your #footerTop and #footer are too big and are responding to the window shrink. The way I would get around this is by adding the background to the #footerContainer instead. If you align it to the centre it will always work since #footerContainer does not have a fixed width.
This will also mean that you won't get the horizontal scroll bar when the browser window is resized to 999px wide. It all depends on how small you want the window to be able to go