css - 如何在 Chrome 中修复背景？

Question

在我正在处理的网站上，我有一个背景图像，我想要填充浏览器的 100% 宽度和 100% 高度并进行修复。下面的代码在 ie10 和 firefox 23 中有效，但在 Chrome 中无效（背景不固定 - 它滚动）。

现场演示：http ://ridge.mydevelopmentserver.com/

<div id="mainContent" class="bg1">my content</div>

#mainContent {
height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#777777;
padding:20px;
box-sizing: border-box;
}

.bg1 {
background:url(../images/backgrounds/bg1.jpg)  no-repeat center center fixed;   
}

有人知道如何在 Chrome 中固定背景吗？

谢谢 ：）

Answer 1

添加固定到 .bg1 的位置，左、上、右和下为零，不要忘记溢出-y：滚动；

.bg1 {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: url(../images/backgrounds/bg1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-y: scroll;
    }