How to make background image mobile responsive?

[JDRDigital]

I’ve attached the link below. My background image won’t scale down to size for mobile.

What can i do?

[Prasant]

Hello @JDRDigital,

Thanks for asking.

Can you please let us know which section you are facing issues with the background image. On my end the page URL you have is showing up fine. Please see screencast. https://cl.ly/2a412j452Q1C

Thanks.

[JDRDigital]

@Prasant the background image of the top/header section does not scale. Take a look again at your screen cast and you see that only a section of the background image shows.

[jade]

Hi there,

The background image does not seem to be scrolling because the background size set to it is cover and that is how it should work.

Try setting the background size setting to contain instead and the background image should always display entirely in the section where it is set to appear including on mobile or as the screen width changes.

You can find more information about background size values here:

https://www.w3schools.com/cssref/css3_pr_background-size.asp

Hope this helps.

[JDRDigital]

@Jade i’ve changed the it to “contain” like you said but now the image won’t fully cover the container in desktop sizes.

Please advise.

[Prasant]

Hello @JDRDigital,

Thanks for asking.

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.