浏览器窗口小于内容时,背景图片不重复? [英] 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 width
s or min-width
s greater than header's, just add the same min-width
to header: http://jsfiddle.net/kizu/3hLjv/3/
这篇关于浏览器窗口小于内容时,背景图片不重复?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!