背景没有填满整个移动视图

Question

我希望让背景变得动态，按比例重新调整大小，并填写整个背景，而不是简单地覆盖其中的一半，就像现在在任何移动平台上一样。

我是网页设计的绝对新手，正在浏览商家网站。我以为我已经想出了我的网站，但我完全忘记了移动视图，所以这个区域很乱。我已经尝试过媒体查询，视口内容等等，但是我觉得有一些默认设置阻止他们工作。

网站：http://www.reliefinsleep.com/

非常感谢！

Answer 1

background-size: cover;将会满足您的需求。这会将bg图像拉伸到视口的大小，裁剪边缘而不是挤压它。

@media all and (max-width: 699px) { /* max-width would be the breakpoint for when this style kicks in */
  body {
    background-size: cover; /* stretches to size of viewport */
    background-position: center; /* center the bg image */
  }
}

您还可以使用background-size属性的百分比，像素和值。见MDN