具有背景隐患的问题

Question

我对Chrome移动版的响应式背景有疑问。我的问题仅在于Chrome。

我要做什么？

    body{
     background-image: url(images/home.png);
     background-position:center;
     background-color:#2e4053;
     background-size:cover;
    }

  @media only screen and (max-device-width: 1100px) {
    body {
     background-image: url(images/homemobile.png);
     background-position:center;
     background-color:#2e4053;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -ms-background-size:cover;
     -o-background-size:cover;
     }
    }

台式机上的Chrome：http://prntscr.com/necegy
Chrome移动版：http://prntscr.com/necf2a
Firefox移动版：http://prntscr.com/necf8t

Answer 1

1. 确保添加背景重复：不重复
2. 确保您的页面被强制设置为最小高度100％
3. 此外，您无需在媒体查询中重复整个样式-只需更改一次即可。

...类似这样的

html {
    height: 100%;
}

body{
    min-height: 100%;
    background-image: url(images/home.png);
    background-position: center;
    background-color: #2e4053;
    background-size:cover;
    background-repeat: no-repeat;
}

@media only screen and (max-device-width: 1100px) {
    body {
        background-image: url(images/homemobile.png);
    }
}

Answer 2

也尝试给身体留些余量和填充物。

body{
        margin:0;
        padding:0;
        background-attachment: fixed;
}