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

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

您需要添加一个min-width比您的主要内容略大的内容。

Answer 3

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

• 宽度 - 100%（因此考虑了图像的全宽）
• “背景重复 - x” - 图像将水平重复

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

现在，如果您调整浏览器大小或在弹出窗口中查看相同的网页，您的浏览器屏幕必然会修改其宽度。假设现在您的浏览器屏幕宽度为 220 像素。由于图像宽度大于浏览器屏幕宽度（在这个特定的测试案例中），所以图像根本不会重复，您也将无法看到完整的图像。

并不是说有什么bug，只是逻辑部分，我们需要理解。

希望能帮助到你。

Answer 4

从您提供的详细信息中很难分辨，但这里有一个答案可能会奏效。添加以下内容

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