Background image appears zoomed in on mobile screens

问题

I'm building a project for school, and I'm having issues with the background image. I've used this code snippet to do it (https://css-tricks.com/perfect-full-page-background-image/), and it works fine on desktop and on Chrome Dev Tools (for mobile devices, that is). It doesn't work properly when I open my website on Chrome or Safari on my phone. Screenshots as follows:

Chrome on Phone

Chrome on phone

Here's my code on CSS:

.container-hero {
height: 100vh;
width: 100%;
background: url("../images/hero-image.jpg") no-repeat center center fixed;
background-size: cover;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;

}

<div class="container-fluid container-hero">
        <div class="row">
            <div class="col-12">
                <div class="hero-j jumbotron text-center text-uppercase text-white">
                    <div class="container">
                        <h1 class="display-4 section-header">Be a hero.</h1>
                        <hr class="block-divider--white">
                        <p class="hero-j text"> At Doug's, we <strong>Evolve</strong> together.</p>
                        <a href="#signup" class="btn btn-lg button-signup">
                        Sign me up!
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

I greatly appreciate the help!

回答1:

IOS Safari, and therefore IOS Chrome, does not support fixed on background. See https://caniuse.com/?search=fixed

I tried your CSS with my own image and it was fuzzy. Taking the fixed out of this statement made it clear.

background: url("https://ahweb.org.uk/gear.jpg") no-repeat center center;

Without knowing the exact layout of your code it is difficult to know whether this will be enough or whether you will have to take the image out to be the background of another container so it remains in view at all times if that is what is required.

来源：https://stackoverflow.com/questions/65139910/background-image-appears-zoomed-in-on-mobile-screens

标签

css

background-image

viewport