CSS background-image inexplicably zooming in on mobile-CodePudding

Sorry if this has been answered elsewhere; the only other place I could find this issue mentioned is

I don't know how I could inspect the styles being applied on my phone browser, so it's hard to figure out the cause of this. Anybody have any ideas?

CodePudding user response：

Maybe it stretchs because of background-size: cover;. Depends how much you can scroll. I would change this property: background-repeat: repeat-y;. Happend to me once as well.

CodePudding user response：

Somehow I had missed this question, which says that background-attachment: fixed is unsuppored on mobile browsers. So I gave up applying the image as a background to the html element and instead added a <div id="background" /> with this styling:

#background {
    z-index: -1;
    background-image: url(../public/images/background.jpg);
    height: 100vh;
    width: 100vw;
    position: fixed;
    background-size: cover;
    background-position: center;
}

That fixed the issue.