background image in outer container looks burry in mobile devices

Hi there,

If you have GB Pro, you can upload a different image for mobile that’s more appropriate for the screen size.

Otherwise, you’ll need custom CSS to replace the image.

As for the other issue, try disabling AMP to test for the occurrence of the issue.

Thanks for the reply @fernandoazarcon2

Could you please share the CSS

Here’s a sample code:

@media (max-width: 768px){
    .gb-container.gb-container-38fe3ae2::before {
        background-image:url(https://images.unsplash.com/photo-1682695795255-b236b1f1267d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    }
}

Hey @fernandoazarcon2

I pasted the code – https://share.zight.com/04ud88KN

the image is still blurry in mobile

Hi there,

can you change the background attachment from fixed to default.
And then clear any caches including your phone browser.

does the blurring stop ?
As there are issues with fixed attachment backgrounds

Hey @diggeddy,

Where do i change the “background attachment from fixed to default”

is it from the code or the element settings?

Select the Container Block with the background image and check its Background settings

Yes, it is set to fixed, and I don’t want to change it. The only issue is in the mobile version

There is a known issue with a fixed CSS background attachment on certain devices, where it can scale up an image, and we need to determine with that is the issue.

And the only way to determine that is by removing the fixed attachment and viewing the site. If it is that then we can look at other options.

Thanks for clarifying. I’ve set it to scroll (default)

And what was the result ? Did it resolve the issue ?
( your site link expired )

Hey David, never mind. I’ll buy the Pro version. Thanks for the assistance.

No problem!