google-chrome - Chrome 中的背景位置与 Firefox 或 IE 不同

Question

我有一个 1322x622 的背景图片，我将内容放在中间 660 像素。这适用于 Firefox 19（Windows 和 Ubuntu）和 IE 8，但不适用于 Chrome 25。在 Chrome 中，背景图像位置似乎是固定的。当浏览器窗口被调整为更小时，工作浏览器会剪掉背景，反之亦然。

我认为相对的CSS如下：

html {
    position: relative;
    left: 50%;
    margin-left: -661px;
    overflow-y: scroll;
} 

body {
    padding-top: 39px;
    overflow: hidden;
    position: absolute;
    width: 1322px;
    background: $mkdBrown;
    background-image: url("banana_tree.jpg");
    background-repeat: no-repeat;
}

#wrapper {
    padding-top: 39px;
    min-height: 550px;
    float: center;
    position: relative;
    margin: 0 auto 0 auto;
}

.container {
    width: 660px;
}

该网站是http://www.monkeykateanddaves.com/。

蒂亚！

Answer 1

您可以尝试使用background-positionCSS 中的属性定位背景。

例如：

body {
    background-position : 660px 50px;
}

您还可以使用以下 hack 使其特定于 Chrome：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body { 
        background-position : 660px 50px;
    }
}