浏览器窗口小于内容时，背景图片不重复？ [英] Background image doesn't repeat when browser window is smaller than content?

问题描述

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

I have a header-container with a background image, like so:

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

当我的浏览器处于全屏（Firefox，Opera，IE）以下结果（一切正常）：

When my browser is in fullscreen (Firefox, Opera, IE), I get the following result (everything is fine):

当我调整浏览器到一个较小的窗口，我得到了这么远（到目前为止很好）：

When I resize the browser to a smaller window i got this (so far so well):

现在向右边的背景图片不重复。

and when i scroll now to the right the background image doesn't repeat.

有没有办法修复它，以便当向右滚动时图像会重复？
我知道它会工作，当我将背景图像移动到CSS的身体，但我有很多图像为不同的div，所以我不能做的身体背景图像。

Is there a way to fix it so that the image will repeat when I scroll to the right? I know it would work when i move the background image into the body of the CSS, but I have many images for different divs, so I'm not able to do it with the body background image.

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

Hope somebody can give me a hint :D

最好的问候，
Bernte

Best regards, Bernte

推荐答案

作为animuson在注释中提到，更有可能如果你有一个 min-width

As animuson mentioned in a comment, it's more likely if you have a set min-width or just some content that expands the page over it's available borders.

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

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

To fix the second one, you can make the wrapper to have width set by it's children, for example, you can use inline-block for this: http://jsfiddle.net/kizu/3hLjv/1/, if you have no wrapper, you can set this to BODY: http://jsfiddle.net/kizu/3hLjv/2/

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

And if you have some blocks with widths or min-widths greater than header's, just add the same min-width to header: http://jsfiddle.net/kizu/3hLjv/3/

这篇关于浏览器窗口小于内容时，背景图片不重复？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！