CSS修复重复背景问题答案

【问题标题】：CSS fixed repeated background problemCSS修复重复背景问题
【发布时间】：2010-09-30 18:33:26
【问题描述】：

我正在设计一个具有固定重复背景的网站，但不知道为什么会有一个问题。

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

有什么想法吗？

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

背景的 CSS 是：

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

【问题讨论】：

嗯...错误一定与您的 CSS 有其他关系，因为我刚刚尝试了您使用其他内容发布的 css sn-p 并且没问题。

标签： css background

【解决方案1】：

这是因为<body> 标签默认设置为浏览器窗口宽度的 100%，而不是网站。这意味着当窗口的宽度小于 960 像素（您的站点的宽度）时，主体块结束。要解决此问题，只需设置：

body {min-width: 960px}

很遗憾，如果没有名为 minmax 的 JavaScript hack，min-width 在旧版本的 Internet Explorer 中不起作用。我建议将它的 javascript 嵌入代码包含在一些条件 cmets 中，以防止在新浏览器中出现不必要的 HTTP 请求和潜在的兼容性错误。所以像这样嵌入 minmax：

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

另外，一般提示 - 这些问题很容易通过使用 firebug 来解决。

【讨论】：

【解决方案2】：

试试下面的 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 似乎可以解决问题。

【讨论】：

谢谢 - 当您修改多年前编写的旧代码时会发生这种情况！

【解决方案3】：

您已经在 style.css 第 13 行定义了 body background: url，但还在第 17 行开始的规则中定义了 body background 的规则。

第 17 行的规则是针对 body、html，但从第 11 行开始的规则仅针对 body。您可能可以将这些浓缩为一个规则，准确定义您想要的背景——颜色或来自 url 的图像

【讨论】：