Chrome 和 Safari 中的页面背景图片答案

【问题标题】：Page background image in Chrome and SafariChrome 和 Safari 中的页面背景图片
【发布时间】：2011-07-07 04:22:59
【问题描述】：

我有一个 HTML 页面，我正在使用 CSS 属性对其应用背景图像。

问题是，我希望这个背景图片出现在相对较长的页面的底部，即页面要滚动到底部才能查看背景图片。

我申请了以下：

body {
    background: url("images/bg_homepage.png") no-repeat scroll right bottom transparent;
}

这适用于 Firefox 和 Internet Explorer，但不适用于 Chrome 和 Safari 浏览器。 Chrome 和 Safari 需要将 background-attachment 属性设置为“固定”，但这正是我不想要的。

请指导。

谢谢

【问题讨论】：

适用于你为我提到的所有浏览器：jsfiddle.net/7CG5z
该代码原样适用于所有浏览器。你的代码中有其他东西干扰它。
感谢您的回复，也感谢三十多点对 jsfiddle.net 的启发

标签： css google-chrome

【解决方案1】：

如果你不希望它出现在你的身体中，你可以创建一个带有 id bg 的 div :)

然后做这样的事情

#bg {
    background: url("/bg.gif") no-repeat scroll left bottom #FFFFFF;
    bottom: 100px;
    height: 396px;
    position: fixed;
    width: 288px;
    z-index: -1;
}

如果你不想在页面的任何地方使用fixed，它在主流浏览器中是行不通的:(

【讨论】：

【解决方案2】：

我已经做到了

body {
    width: 100%; height: 100%;
    position: absolute;
    background-image: url(img/strand_402.jpg);
}

适用于所有浏览器（包括 IE）。

【讨论】：