背景图片大小封面不适用于移动浏览器

时间:2016-12-07 13:04:42

标签: css

我在移动设备上遇到了显示网站的问题。设置为cover的图像背景大小在桌面上运行良好,但在Chrome安卓手机中,它无法全屏显示。我知道之前曾经问过并尝试过但我没有运气。

我尝试的是:

html, body {
  height:100%;
    min-height:100%;
    margin: 0;
    /* The image used */
    background-image: url('../images/bg.png');
    background-repeat:no-repeat;
    background-position: center center;
    background-attachment:fixed;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
}

我还尝试添加媒体查询以显示较小的背景图像以适应移动屏幕,但没有运气。

媒体查询:

@media only screen and (max-width : 500px) {
body, html {
        background-image: url('../images/mobile-bg.png');
        background-repeat:no-repeat;
        background-position: center center;
        background-attachment:fixed;
        -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      overflow: hidden;
    }
}

0 个答案:

没有答案