[Resolved] Background Image Issue

Hi pranaman

I’m not sure why Chrome handles that differently. What you’re seeing, is the image load at the original size and then fit into the container. The only things I can think to try are:

1. You could try adding the image directly via an Editor widget and not as a background image, any difference?
2. You could try making the image a bit smaller, perhaps 1440px wide to make the jump less noticeable.
3. You could try adding a Hero widget and add the image via a Frame in the Hero widget into the row which is Full Width Stretched. Any difference?

I believe in the past, users have added to Custom CSS for Beaver full-width the following:

/* Ultra Beaver Site Content */
.fl-builder .site-content .container {
    max-width: none;
}

That should sort the mobile issue out. If you’d like me to make this snippet specific to a page or post, please, let me know.

Custom CSS can be added to Customize > Additional CSS. A Custom CSS plugin or a child theme style.css file.

No problem. I’ll be able to take a look again in a couple hours.

Important: Please, don’t make any edits to style.css. All themes and plugins completely overwrite their own files during updates. If you update Ultra all changes will be lost. Custom CSS must be inserted at Customize > Additional CSS or in a similar update safe location.
Thanks.

but，It does not work here too，

Change the CSS snippet to:

.fl-builder .site-content .container {
    max-width: none;
    padding: 0;
}

That should resolve the issue.

Glad to hear that helped 🙂

No problem, I imagined this might come up. (The advantage of Page Builder by SiteOrigin is it can handle full-width rows independently, without any need for the theme to adjust.)

It’s quite late on my side. Please, let me test locally tomorrow and come up with a proper solution for you. I’ll reply as soon as it’s ready.

Thanks for the wait.