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

所以我有一个图像卡在我的页面顶部，重复所有的方式跨越顶部。出于某种原因，当我调整窗口大小，然后向右滚动到停止重复。 div是包装器之外的文档中的第一个。有任何想法吗？窗口大小调整时，标题图像停止重复

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

}

来源

2010-08-10 Davey

你能指点一个有效的例子吗？ – Frankie 2010-08-10 16:59:29

@Frankie StackOverflow有同样的问题，以及ux.stackexchange.com – 2012-09-14 17:35:54

@MattRockwell解决它的诀窍是应用CSS规则“固定”，但是会将DIV * always *显示出来。在SO上，这根本行不通。 SO目前发生的事情是，TOP-BAR的尺寸与100％的视角一致，如果您将TOP-BAR的尺寸设置为BODY，它会一直运行良好。看看CSS'fixed'属性。 – Frankie 2012-09-15 02:29:33

这似乎在FireFox中工作正常。调整窗口大小时请检查父元素的宽度。

来源

2010-08-10 17:11:57

载由代码可用的基准是： -

宽度 - 100％（图像的那么整个宽度考虑在内）
“背景重复 - X” - 图像将重复水平地

在内部，比如图像的宽度是250px &您的完整浏览器屏幕的宽度是1024px。因此从技术上讲，图像将水平重复至少5次，其中最后一次将显示一点点。

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

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

希望它有帮助。

来源

2010-08-10 18:29:36

从你提供的细节很难说清楚，但这里有个答案可以解决问题。添加以下内容

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

来源

2011-05-12 15:04:27 breezy

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

来源

2012-09-14 19:17:45

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

回答

相关问题