使用媒体查询来实现响应式body背景

Question

我正在设计一个带有固定墙纸的响应式网站，下面是我的.CSS代码：

body {
  background: url(/path...) no-repeat fixed !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover
}
/* Custom, iPhone Retina- Personal comment: mobile portrait */
@media only screen and (min-width: 320px) {
  body {
    background: url(images/mobile_dark_bg0.jpg) no-repeat fixed;
  }
  h1 {
    font-size: 40px
  }
  h2 {
    font-size: 25px
  }
  h3 {
    font-size: 22px
  }
  p {
    font-size: 20px
  }
  .p2, .p3 {
    font-size: 18px
  }
}
/* Extra Small Devices, Phones- Personal comment: mobile landscape */
@media only screen and (min-width: 480px) {
  body {
    background: url(images/mobile_dark_bg1.jpg) no-repeat fixed;
  }
  h1 {
    font-size: 40px
  }
  h2 {
    font-size: 25px
  }
  h3 {
    font-size: 22px
  }
  p {
    font-size: 20px
  }
  .p2, .p3 {
    font-size: 18px
  }
}
/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
  body {
    background: url(images/bg_img.jpg) no-repeat center center fixed;
  }
  h1 {
    font-size: 40px
  }
  h2 {
    font-size: 25px
  }
  h3 {
    font-size: 22px
  }
  p {
    font-size: 20px
  }
  .p2, .p3 {
    font-size: 18px
  }
}
/* Medium Devices, Desktops */
@media only screen and (min-width: 1200px) {
  body {
    background: url(images/bg_img.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 100%
  }
}

请注意，我"更改原始的身体背景，并在媒体查询中使用另一个，以实现页面的响应背景"。

但是背景总是弄乱，要么放大，要么底部有白色差距；它可以在小且小小的小小的小型和屏幕上起作用，屏幕越多。

我在做什么错？

Answer 1

如果您的背景在底部有白色差距，请尝试：

html, body {
    height: 100vh;
}

100vh将允许该页面是设备的高度，而不是容器高度的100%。

Answer 2

尝试删除no-repeat center center fixed

@media only screen and (min-width: 1200px) {
  body {
    background: url(images/bg_img.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
  }
} 

这对我有用。no-repeat center center fixed使我的图像完全消失了。