Background Image Does Not Cover On Mobile

问题

I have a background image on my homepage that correctly covers the entirety of the screen. However, on mobile, the image does not resize to fit properly. It instead only shows a portion of the image. The css is below:

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

Here is a link to the homepage. If you resize the browser to mimic a mobile screen you will see what I am talking about:

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

回答1:

I solved the problem by removing 'no-repeat center center fixed' from my background-image property. Here's the updated css:

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

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

来源：https://stackoverflow.com/questions/57260433/background-image-does-not-cover-on-mobile