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

因此，我在页面顶部粘贴了一个图像，该图像在页面顶部一直重复。由于某种原因，当我调整窗口大小，然后向右滚动时，它停止重复。div是包装器之外文档中的第一个。有什么想法吗

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

}

---

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

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

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

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

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

这并不是说有任何缺陷，这只是我们需要理解的逻辑部分

---

希望能有所帮助。

从您提供的详细信息很难判断，但这里有一个答案可以解决这个问题。添加以下内容

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

---

您需要添加一个

minwidth

，使其略大于您的主要内容。

能否请您指向一个工作示例的链接？@Frankie StackOverflow与ux.stackexchange有相同的问题。com@MattRockwell解决这个问题的诀窍是应用CSS规则“fixed”，这将始终显示DIV。这样做根本不起作用。目前，SO的情况是，顶栏的大小与视图端口的大小一致，具有100%，如果您将顶栏的大小与主体一致，它将一直运行。查看CSS

fixed

属性。