后台响应的问题

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

也尝试为正文提供边距和填充。

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

Answer 2

确保添加 background-repeat: no-repeat
确保您的页面被强制设置为 100% 的最小高度
此外，您不需要在媒体查询中重复整个样式——只需更改一个样式即可

...像这样

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);
    }
}

后台响应的问题

Troubles with Background Resposive

html

css

responsive