Html 背景图像不'；当浏览器窗口小于内容时，是否重复？

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

#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

致以最良好的祝愿，

---

Bernte

它不起作用的原因是，在CSS中，块框不会展开以包围其内容。您的

#标题容器

具有普通宽度（不比窗口宽），并且不会向右侧额外延伸

---

尝试应用

#标题容器{display:table；}

。使用表格布局模型会使框放大以适合内容，但如果不需要放大，则它仍将尊重您的

宽度
尝试使用：after伪元素，并在其中添加图像

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

或者类似的东西。
正如animuson在评论中提到的，如果你有一个设置
最小宽度
，或者只有一些内容可以在页面的可用边框上展开页面，那么这种情况更可能发生

第二个例子是：

要修复第二个问题，您可以使包装的宽度由其子项设置，例如，您可以为此使用
内联块
，如果您没有包装，则可以将其设置为
正文
：

如果您有一些块的
width
s或
minwidth
s大于页眉，只需将相同的
minwidth
添加到页眉：
在您的情况下，您可能只需要删除该类中的宽度和边距样式：

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

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

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

我不想批评其他答案，但在这一点上，他们可能是所有你真正想要实现的复杂。。。（欢迎更多描述）
我不允许发表评论，因此我将在这里添加另一个答案，也许这对某人有所帮助

凯文·里德的解决方案对我有效，但仅与将宽度设置为100%相结合，因此我最终得到了以下结果：

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

添加到“主体”标签的宽度：100%；显示：表格

最常见的情况是，当主体或包含内容的某些元素指定的最小宽度大于窗口的宽度时，会发生这种情况。背景图像仅扩展到元素的填充宽度，因此可以正确显示。但是，其他内容与该元素的侧面重叠，浏览器窗口必须向右滚动才能查看其他内容。有时，边距或填充也会导致此问题，但我真的不知道如何解决它。
body
{
    //..your_body_css_here...
    width: 100%;
    display: table;

}