Background image- not responsive

Hi there,

I have added background images to my pages and when I view them in smaller screens i.e phone. It doesn’t seem to be responsive. How can I go about making it responsive?

Thank you in advance.

Hi There,

Thanks for writing in!

Can you please try the background setting as per the screenshot attached here.

Let us know how it goes.

Thanks

Hi basanta,

I just tried it! The picture repeats and now there are two pictures in the title section on my phone.

Hi There,

Would you mind providing us the direct page URL where we can see that section, so we can take a closer look.

If I am correct what you’re referring as not responsive is because the background image is being cut and not centered? If so, that is how the background-image works and it is responsive in its own way. What you can do about that is to adjust the background-position and background-size. Please read this post for more details.

Thanks,

Hi friech,

https://test.foodmesh.ca/features-2/. I have tried making it 100% and adjusting both X and Y.

Hi there,

I checked your website and see that the background image is actually acting as it should. Please consider that background images are not like the image tags <img>. They can be normal, cover or contain and there is no other way to have them on the web.

You have these options at hand in the settings and it will not have another way. Kindly read in details the background image section of the article below:

https://www.w3schools.com/css/css_rwd_images.asp

Your image for the background is in a way that it will get cut anyway during the responsive mode and it will lose the information you want to convey. I suggest that you either use the image element instead or use the Hide During Breakpoint option to hide the section for the mobile devices and use another proper image for mobile view in a separate section which will show only on mobile devices.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.