**[Solved]** Image size messed up when running website on a mobile device

问题

[Solved] So I have an image that I want to display behind some text. It works fine when I open the website on my desktop browser. Even going into mobile mode from console does not show any problems. However, after deploying the website, when I open it on an actual mobile device, the image is stretched out.

I tried making width and height auto and allowing max-width to be 100% but screws up the image in other ways.

This is how it shows on desktop https://i.stack.imgur.com/9yyta.png. This is how it shows on cellphone mode in chrome console https://i.stack.imgur.com/kORcg.png But this is how it shows on an actual mobile device https://i.stack.imgur.com/9ftSy.jpg[https://i.stack.imgur.com/9ftSy.jpg][1]

HTML

<div class="row d-flex text-center justify-content-center pb-4 footerWithImage">
            <div class="row mt-4 d-block text-white col-lg-5">
                <!-- Content -->
                <h6 class="text-uppercase font-weight-bold">Carson Moore Fitness</h6>
                <hr class="bg-light mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                <p>Helping clients build muscle, burn fat and improve posture using safe and effective,
                    personalized fitness programs.</p>
            </div>
            <div class="row mt-4 d-block text-white col-lg-5 footerContacts">

                <!-- Links -->
                <h6 class="text-uppercase font-weight-bold">Contact</h6>
                <hr class="bg-light mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                <br>
                <a href="https://g.page/sandcastlefitnessclub-24hrs?share"><i class="fas fa-home mr-3"></i>White Rock,
                    Surrey, BC</a><br>
                <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top"><i
                        class="far fa-envelope mr-3"></i>&nbsp;info@carsonmoorefitness.com</a><br>
                <a href="tel:604-555-5555"><i class="fas fa-phone mr-3"></i>+16045555555</a>
                <div id="socialMediaLinksDiv">
                </div>
            </div>
        </div>

CSS

.footerWithImage {
    background: url("https://images.unsplash.com/photo-1563685759732-3b118f9445c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 20%;    
}

Note: It's solved.

Here's what solved it:

@media only screen and (max-device-width: 1366px) { 
   .footerWithImage { 
       background-attachment: scroll; 
   } 
}

回答1:

You are going to need to target that image using media queries to specify the size you want on mobile.

回答2:

Make sure you put !important after background styles as a lot of browsers/frameworks will overwrite your custom styling e.g. background-size: cover;

.footerWithImage {
    background: url("https://images.unsplash.com/photo-1563685759732-3b118f9445c3");
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center 20% !important;    
}