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

问题描述

我有一个头，容器的背景图像，像这样：

 ＃头容器
{
背景：网址（../ IMG / bg.jpg）重复 -  X 0 0像素;
保证金：0px auto的;
宽度：100％;
文本对齐：中心;
}
 

在我的浏览器全屏（Firefox，歌剧，IE浏览器），我得到以下结果（一切都很好）：

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

和现在当我向右滚动的背景图像不重复。

有没有办法解决它，这样，当我向右滚动的图像将重复？
我知道，当我移动的背景图像到CSS的身体会工作，但我有不同的div有许多图像，所以我不能够与身体的背景图像做。

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

最好的问候，
Bernte

解决方案

由于在评论中提到animuson，它更可能，如果你有一组最小宽度或只是，超过它扩展了网页内容的一些可用的边界。

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

要解决的第二个，可以使包装具有宽度设置被它的孩子，例如，你可以使用 inline-block的此：的 http://jsfiddle.net/kizu/3hLjv/1/ ，如果​​你没有包装，可以将此设置为 BODY ： http://jsfiddle.net/kizu/3hLjv/2/

如果你有宽一些块 s或最小宽度总比头的更大，只需添加同样最小宽度到标题： http://jsfiddle.net/kizu / 3hLjv / 3 /

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;
}

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.

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.

Hope somebody can give me a hint :D

Best regards, Bernte

解决方案

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.

There is an example of the second one: http://jsfiddle.net/kizu/3hLjv/

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/

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屋！