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/。

TIA！

Answer 1

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

例如：

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

您还可以通过以下黑客攻击特定Chrome：

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

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

1 个答案: