Background image set in section on lower layer is not resizing well for mobile

[ciprian_constantin91]

Hi there,

My website: https://www.dansulnostru.ro/

On my first page, in the first section I have added a background picture which looks very nice on laptop/desktop, but I don’t like how it is on mobile.

I tried various ways to change it, but without any success and I really need your support.

In order for you to understand better how I want to look like, I will attach the link of another website (https://www.willpursell.com/) which is resizing the background image from the first section in the same way I want.

Thank you.

[ruenel]

Hello Ciprian,

Thanks for writing in!

I have compare the two background image in the respective sites. The only different is to position of the background. Please edit your page and then in your background position, set it to center top so that the position will always be on top and at the center.

We would love to know if this has worked for you. Thank you.

[ciprian_constantin91]

Hi,

This didn’t help me, I want to have this couple showed completely on mobile.
I would love to have my section like this:

[ciprian_constantin91]

But with my current settings is displayed like this:

Can you please let me know how to sort it out?

Thanks

[lely]

Hi Ciprian,

Thank you for the clarification. Please try to add the image as background on ROWS instead. Then duplicate the ROWS. On ROWS > CUSTOMIZE TAB > HIDE DURING BREAKPOINTS, set it so one ROW is HIDDEN ON DESKTOP AND THE OTHER HIDDEN ON MOBILE.

After that, you may now control the spacing like margins and paddings on mobile view without affecting the look on desktop. Note that background image adjust depending on the height of the content. The longer the content mean background will stretch much than usual. Reduce margins and test which is better on mobile view.

Hope this helps.

[ciprian_constantin91]

Thank you, this helped me.

[lely]

You’re always welcome Ciprian!

Cheers.