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

Question

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

#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

Answer 1

作为评论中提到的animuson，如果你有一组min-width或者只有一些内容可以扩展页面的可用边框，则更有可能。

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

要修复第二个，您可以让包装器的宽度由其子项设置，例如，您可以使用inline-block：http://jsfiddle.net/kizu/3hLjv/1/，如果您没有包装器，则可以将其设置为BODY：http://jsfiddle.net/kizu/3hLjv/2/

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

尝试使用：after伪元素和你的图像。

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

或类似的东西。

Answer 5

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

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

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

如果情况并非如此，我们（全部）将需要您的主要布局html和css来提出正确的解决方案。

不想批评其他答案，但在这一点上，他们可能会因为你真正想要实现的目标而变得复杂......（更多描述是受欢迎的）

Answer 6

添加到“body”标签“width：100％; display：table;”

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

}