Question

所以我有一张图片贴在我的页面顶部，一直重复到顶部。出于某种原因，当我调整窗口大小然后向右滚动时，它会停止重复。 div是包装器之外的文档中的第一个。有什么想法吗？

#header {
    background-image:url('http://daveywhitney.com/img/paperhead.png');
    background-repeat: repeat-x;
    width: 100%;
    height: 145px;
    margin:0 0 20px 0;

}

Answer 1

这似乎在FireFox中运行良好。在调整窗口大小时检查父元素的宽度。

Answer 2

您的代码设置的可用基准是： -

宽度 - 100％（因此考虑图像的全宽）
“background repeat - x” - 图像将水平重复

在内部，假设图像的宽度为250px＆amp;整个浏览器屏幕的宽度为1024px。从技术上讲，图像将水平重复至少5次，全尺寸和4倍。最后一个将显示一点点。

现在，如果您在弹出窗口中调整浏览器大小或查看同一网页，则必须修改浏览器屏幕的宽度。假设现在您的浏览器屏幕宽度为220px。由于图像宽度大于浏览器屏幕宽度（在此特定测试用例中），因此图像根本不会重复，＆amp;你也将无法看到完整的图像。

这不是有任何错误，它只是我们需要理解的逻辑部分。

希望它有所帮助。

Answer 3

很难从你提供的细节中得知，但这里有一个答案可能会有所帮助。添加以下

#header {
    background-image:url('http://daveywhitney.com/img/paperhead.png');
    background-repeat: repeat-x;
    width: 100%;
    height: 145px;
    margin:0 0 20px 0;
    overflow:hidden;
    position:relative}

#wrapper {width:960px;margin:0 auto;position:relative}

Answer 4

您需要添加min-width，使其略大于您的主要内容。

调整窗口大小时，标题图像停止重复

4 个答案: