Background image doesn't resize on mobile

[digitalpractice]

Hi,

Could you please let me know how I can resize a background image for a mobile? The background image seems to resize for tablets but not for a mobile.

Pls take a look here: https://livercentrewa.com.au (the image underneath the title: Do you need expert liver treatment).

Can you please let me know what I need to make it beautifully centered on an iphone/mobile, similar to the desktop version?

[thai]

Hello There,

Actually it’s a bit difficult to achieve a total responsiveness for background images without compromises. I suggest yo to try out having two different sections, one for mobile and for desktop and set the properties accordingly. And under Customize > Hide During Breakpoints you can hide the section depending on the screen-sizes. https://cl.ly/2B3M3C09013M

You can take a look at following page to learn more on how background image works:

https://davidwalsh.name/demo/background-size.html

You can also try out following solution. First set the background size to Cover. After that, In the first section (https://cl.ly/282O1m0g2P17) add a custom Class under Customize > Class https://cl.ly/1W0y1h1z0d3f. After that add following CSS under Pro > Theme Options > CSS:

@media screen and (max-width: 890px){
    .custom-class .x-bg-layer-upper-image {
        background-size: contain!important;
    }
}

You can replace class name as per your requirement.

Let us know how it goes.

Thanks.