Background image changes size on mobile when scrolling

[Brent_St]

Hi,

I set the background image for the entire site in Pro > Theme Options > Layout and Design

It works fine on desktop but in the mobile view once you scroll down past the header it changes size.

Any help you can offer is great.

thanks,

Brent

[friech]

Hi Brent,

Thank you for writing in, I can’t replicate that issue on my end, what device you’re on? Please try clearing all your caching features/plugin.

Cheers!

[Brent_St]

Hi,

By the client and myself are on iPhones. I am using a 7 and he is on an 8

I can’t repoicate the problems using the dev function on my Mac and using safari.

You can see in the two images I have linked to the difference.

[Album] Imgur

[thai]

Hi Brent,

Can you please try adding this custom CSS under Theme Options > CSS?

@media (max-width: 767px){
    .backstretch img {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
    }
}

Hope it helps

[Brent_St]

Hi Thai,

unfortunately the issue persists after i add this code to the custom css.

thanks,

Brent

[paul.r]

Hi Brent,

Sorry there is a syntax error in the code.

Kindly change it to

@media (max-width: 767px) {
    .backstretch img {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
    }
}

Thanks