Page hero custom image changes position on mobile when "merge with content"

Hi there,

in the Header Element below where you select the background image you can select the position, set this to center center

I tried all the options, it does not make the bkgr image centered until I choose to unmerge with the content.
The image is 1920 by 843 pixels.
When the header in element the nav menu is not merged with content, the image is resisting to fit the mobile size screen. But it does not happen when the header is merged...

Maybe I should try to choose a different image

Hi there,

Have you figured this out? The topic is marked as resolved.

Background images aren't responsive by nature (it's not a theme thing).

Another solution would be use an image specifically for mobile with this CSS:

@media (max-width: 768px) {
    .home .page-hero {
        background-image: url(https://IMAGE-URL);
    }
}

Let us know if this helps or not :)

Thanks for the reply but the CSS doesn't help.
The image stays uncentered on mobile. Even if I change to header merged only on desktop it is still not centered.
I see this example as a successful implementation of a merged: https://www.lynnharrell.com/

So set you Header Element to display the image correctly on Desktop.
Then add this CSS to reposition it for the smaller screens:

@media (max-width: 768px) {
    .page-hero {
        background-position: 20% center;
    }
}

Thank you David! This works just fine. Although applying the CSS doesn't reduce the image proportionally but it centers it on the smaller screen.

Thank you for your help guys! Have a good weekend :)

You're welcome