手機無法覆蓋背景圖片

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