Background image not responsive to mobile

[delfijurado]

Hi there,

I can’t seem to make my background responsive to mobile. I have two separate sections, one for mobile and one for desktop to try and achieve this. The image appears extremely zoomed in in mobile devices.

I have tried the css below but it still does not work.

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

Please help! Thank you!!

[lely]

Hi Delfina,

If you are using different section for desktop and mobile, no need to use custom CSS. Please inspect the section for mobile and on Background Upper Layer, set SIZE setting to contain.

You only need to use custom CSS if you are using one section for both mobile and desktop view. That CSS you share is correct. It might not work only if you have CSS syntax error before that CSS. Please double check all your css before that. Make sure that all open { have corresponding closing }.

If you still have issues, please share the site URL and point us to the correct section so we can investigate further. Thank you.

[delfijurado]

Hi lely!

Thank you for your help. When I change the size to “contain” all I see in a mobile device is gray background (default section background) on the screen.

My site url is mielagencia.com and the section I’m talking about is “Tapa Mobile”.

Thank you in advance!

[ruenel]

Hello Delfina,

You are using x-bg-layer-upper-image. This code will only be applied to the background image added in the upper layer. If you have used the lower layer, then the class would be x-bg-layer-lower-image.

I have checked your homepage and I am not seeing “Tapa Mobile” section. I must be on the other page. By the way, when you set the background size to “contain”, make sure that the background image is wider because contain means that the image will be resized and displayed the whole image inside the container.

I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto; but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this helps.

[delfijurado]

Hi!

Thanks for the thorough explanation but unfortunately none worked. In the mobile device tester that comes in pro it does work and the image IS responsive, and adapts to different sizes BUT (see attached image) when I load my site on a mobile device (tried 3 different ones) the image does not respond well. Can this be fixed? Or if I tried all the css above, thats it?

Thank you

[nabeel]

Hey Delfina,

This is the limitation of the using background images, It behaves differently on different screen resolutions and it also depends on other factors, such as image size, background size property so you cannot do much. I’d recommend you to use Image element instead of background image for mobile devices to make it truly responsive.

Hope this helps!

[delfijurado]

Hi!

That helped actually thank you but I ended up using the css below and it did the job:

body {
background-image: url(“imageurl.gif”);
background-color: #cccccc;
}

Thank you for the help!!

[nabeel]

We’re glad you sorted it out.

Cheers!