当浏览器窗口小于内容时，背景图像不会重复？答案

【问题标题】：Background image doesn't repeat when browser window is smaller than content?当浏览器窗口小于内容时，背景图像不会重复？
【发布时间】：2011-11-21 13:07:55
【问题描述】：

我有一个带有背景图像的标题容器，如下所示：

#header-container
{
background:url(../img/bg.jpg) repeat-x 0 0px;
margin:0px auto;
width:100%;
text-align:center;
}

当我的浏览器全屏（Firefox、Opera、IE）时，我得到以下结果（一切正常）：

当我将浏览器调整为较小的窗口时，我得到了这个（到目前为止一切顺利）：

当我现在向右滚动时，背景图像不会重复。

有没有办法修复它，以便当我向右滚动时图像会重复？我知道当我将背景图像移动到 CSS 的主体中时它会起作用，但是我有许多不同 div 的图像，所以我无法使用主体背景图像来做到这一点。

希望有人能给我一个提示：D

最好的问候，伯恩特

【问题讨论】：

当正文或某些包含内容的元素具有大于窗口宽度的指定最小宽度时，通常会发生这种情况。背景图像仅扩展以填充元素的宽度，因此可以正确显示。但是，其他内容与该元素的侧面重叠，并且浏览器窗口必须向右滚动才能查看该附加内容。有时边距或填充也会导致此问题，但我真的不知道如何解决。

标签： html css browser scroll background-image

【解决方案1】：

正如 animuson 在评论中提到的那样，如果您有一组 min-width 或者只是一些将页面扩展至可用边框的内容，则更有可能。

有第二个例子：http://jsfiddle.net/kizu/3hLjv/

要解决第二个问题，您可以使包装器的宽度由其子级设置，例如，您可以为此使用inline-block：http://jsfiddle.net/kizu/3hLjv/1/，如果您没有包装器，您可以将其设置为@ 987654327@:http://jsfiddle.net/kizu/3hLjv/2/

如果您有一些块的widths 或min-widths 大于标题，只需将相同的min-width 添加到标题：http://jsfiddle.net/kizu/3hLjv/3/

【讨论】：

【解决方案2】：

它不起作用的原因是在 CSS 中，块框不会展开以包围其内容。您的#header-container 具有普通宽度（不比窗口宽），并且不会额外向右延伸。

尝试申请#header-container { display: table; }。使用表格布局模型会导致框被放大以适应内容，但如果不需要放大它仍然会尊重您的width。

【讨论】：

【解决方案3】：

我不允许评论，所以我会在这里添加另一个答案，也许它可以帮助某人。

Kevin Reid 的解决方案对我有用，但仅与将宽度设置为 100% 结合使用，所以这就是我最终的结果：

#header-container
{
    display: table;
    width:100%;
    background:url(../img/bg.jpg) repeat-x 0 0px;
    margin:0px auto;
}

【讨论】：

【解决方案4】：

尝试使用包含图像的 :after 伪元素。

#header-container:after {
    content: "";
    background:url(../img/bg.jpg) repeat-x 0 0px;
    width: 9999px;
    position: absolute;
}

或者类似的东西。

【讨论】：

【解决方案5】：

在您的情况下，您可能只能删除该类中的宽度和边距样式：

#header-container
{
    background:url(../img/bg.jpg) repeat-x 0 0px;
    text-align:center;
}

width:100% 使得 div 采用视口的宽度，如果您可以向右或向左滚动，则该宽度与文档的宽度不同。

如果不是这样，我们（所有人）将需要您的主要布局 html 和 css 来提出适当的解决方案。

不想批评其他答案，但在这一点上，对于您真正想要实现的目标来说，它们可能过于复杂......（欢迎提供更多描述）

【讨论】：

【解决方案6】：

添加到“body”标签“width: 100%; display: table;”

body
{
    //..your_body_css_here...
    width: 100%;
    display: table;

}

【讨论】：