背景图片无法覆盖移动设备

Question

我的主页上有一张背景图片，可以正确覆盖整个屏幕。但是，在移动设备上，图像无法调整大小以正确放置。相反，它仅显示图像的一部分。 CSS如下：

#hero {
  width: 100%;
  height: 50vh;
  overflow: auto;
  background: url("./hero.webp") no-repeat center center fixed; 
  background-size: cover;
}

@media (min-width: 768px) {
  #hero {
    height: 100vh;
  }
}

这里是首页的链接。如果您调整浏览器大小以模仿移动屏幕，您将看到我在说什么：

https://stormy-temple-25830.herokuapp.com/#/

Answer 1

我通过从背景图片属性中删除“固定的无重复中心中心”解决了该问题。这是更新的CSS：

#hero {
  width: 100%;
  height: 50vh;
  overflow: auto;
  background: url("./hero.webp"); 
  background-size: cover;
}

@media (min-width: 768px) {
  #hero {
    height: 100vh;
  }
}