如何使用大于可见区域的背景图像答案

【问题标题】：How to use a background image larger then the visible area如何使用大于可见区域的背景图像
【发布时间】：2012-02-16 19:36:00
【问题描述】：

我的背景图片宽度为 1300 像素。

我创建了#header 容器，其宽度为：100% background-image('image-bg') center; 内容有960px；边距：0 自动；所以它总是在中心。

#header 位于 #page 容器中，该容器也具有 100% background-image('image-bg-border') center;只是为了创建一个漂亮的边框

但是现在当我在小宽度值上调整浏览器的大小时，#page、body、html 小于 #header 或其他具有 960px 的元素中的内容；边距：0 自动。

当您在小宽度上调整#page 的大小时，如何使#page 的宽度至少与#header 相同？临时链接：已删除

编辑：查看 div#page，同时在较小的值上调整浏览器的宽度。一品脱的#header 变得比#page 大，以查看此滚动到水平右侧。

【问题讨论】：

抱歉，问题不清楚。如果您将其缩小，您链接到的页面将获得一个水平滚动条。这不是你想要的吗？那你应该解释得更好。
当您将浏览器的宽度调整为较小的值时，#page 和#header 应该保持不变，但 #page 会变小。要查看此将浏览器调整为小宽度，请水平向右滚动。使用 google chrome、开发者工具之类的东西（显然你知道，否则你无法帮助我）

标签： html css

【解决方案1】：

div#page 没有设置宽度，所以它默认为窗口的宽度。其中的 header#branding 确实有 960px 的最小宽度，因此它将延伸到 div#page 区域之外。

您想让 div#page 的最小宽度为 960 像素，还是尝试将整个页面限制为窗口宽度？

【讨论】：

我完全错过了 div#page。我解决了。同样调整大小时还有另一个问题。如果您在浏览器调整为小尺寸时滚动顶部，则字体会变小一些。为什么？
@Alqin 很抱歉这么久才回复您。忙碌的一天。但是您的 211 样式表中有 @media (max-width: 650px)，这会减小较窄屏幕上的字体大小。
没关系，非常感谢所有帮助。我还有很多东西要学。
快速提问。我如何覆盖 @media 以使其成为默认值，因为它从未在不更改包含它的原始样式表的情况下被声明？
@Alqin 如果您不想更改该特定 css 文件的内容，只需将另一个 @media (max-width:650px) 放入稍后包含的另一个 css 文件中，并使用您想要的样式属性，例如实例font-size:medium 我想是的。如果您确保稍后加载它，浏览器将使用此声明而不是原始声明。