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?

hello，I placed the background whit Beaver Builder on the phone can not be full screen，
https://www.lucr.com/errore-test
before the computer could not have full-screen background whit Beaver Builder , so I resolved by modifying the margin to -25,
Hope to add two items in page settings : left margin and right margin ，like footer top margin，Then we can set the page that needs full-screen background, not all pages，

thanks

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.

Sorry, it does not work，
I added it in style.css

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.

ok，ok，I added it in Additional CSS and I deleted it in to style.css
https://www.lucr.com/wp-content/uploads/2017/06/[email protected]

but，It does not work here too，

Accurate to say, there are always 25px margins, the computer is also seen，Because I used the -25 margins，So the computer can not see，
These are screenshots
https://www.lucr.com/wp-content/uploads/2017/06/MLE6BZPY1Q0OFN1SO3IBJ.png
https://www.lucr.com/wp-content/uploads/2017/06/CSQPRK0GG2XIZY88NH.png
https://www.lucr.com/wp-content/uploads/2017/06/OT9QJI@DOK7_PBLT7.png

Change the CSS snippet to:

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

That should resolve the issue.

yes,！！！ thank you very much！！！

Glad to hear that helped 🙂

I am sorry , New problem，https://www.lucr.com/2017061601/
Article content if edited with Beaver Builder，The margins of components that can not be edited will also disappear

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.

Also, Fang, if you don’t mind, please, could you open a support topic. You can do so here: https://purothemes.com/support/forum/ultra-theme/ at the bottom of the page. The thread we’re talking on is resolved and belongs to pranaman so they’ll be getting notifications for each message. Happy to resolve this with you ASAP tomorrow but let’s do it in a new topic if possible. Thanks.