CSS修复了重复背景问题

我正在设计一个固定重复背景的网站，但无法弄清楚为什么它有一个问题。CSS修复了重复背景问题

如果您在一个小窗口中加载该网站，然后向右滚动，背景不会继续，而是显示背景颜色。

任何想法？

网站是：http://new.focalpix.co.uk/

CSS的背景是：

body { 
    background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed; 
}

来源

2009-01-11 Rich Bradshaw

嗯......错误必须与您的CSS做其他事情，因为我刚刚尝试了您发布的其他内容的CSS片段，并没有问题。 – 2009-01-11 11:49:58

试试下面的CSS：

body, html { 
    color:#fff; 
background: #000 url(http://media.focalpix.co.uk/img/gradbackground.png) fixed repeat-x; 
    text-align:center; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif; 
} 

body { 
    font-size: 70%; 
}

它看起来像（在Opera和Chrome），浏览器将浏览器初始视口之外的区域视为HTML标记的一部分，但不属于BODY的一部分。您可以通过将背景图像放在HTML上而不是BODY标签来验证这一点，然后查看它只出现在文档的滚动视图区域中。我不知道为什么会发生这种情况 - 有人吗？

虽然上面的CSS似乎解决了这个问题。

来源

2009-01-11 12:17:47

谢谢 - 当您修改您以前写过的旧代码时，会发生这种情况！ – 2009-01-11 15:34:48

您已经定义主体背景：在style.css中第13行的网址，但在规则的起始体的背景也被定义规则在线17上。

第17行的规则是body，html，但是第11行开始的规则仅适用于body。你也许可以凝聚到一条规则，定义要的背景是什么 - 从URL颜色或图像

来源

2009-01-11 12:01:38 rejj

这是由于<body>标签默认设置为浏览器窗口宽度的100％ - 而不是网站。这意味着当窗口的宽度小于960像素 - 网站的宽度时，主体块结束。为了解决这个问题，只需设置：

body {min-width: 960px}

不幸的是，最小宽度不老版本的Internet Explorer没有JavaScript的黑客称为minmax工作。我会建议在一些条件注释中加入javascript嵌入代码，以防止在新浏览器中出现不必要的HTTP请求和潜在的兼容性错误。所以嵌入MINMAX像这样：

<!--[if lte IE 7]> 
<script type="text/javascript" src="minmax.js"></script> 
<![endif]-->

而且，一般的提示 - 这些问题是很容易通过firebug玩来解决。

来源

2009-01-11 12:20:47

CSS修复了重复背景问题

回答

相关问题