Section background image not responsive

[yaqubb]

Hi,

The section background images on my site are not resized when viewing on different screen sizes…

https://spacingshape.com/mutualwp/

Any idea what the issues is and how I can get these background images to be responsive?

Cheers

[nico]

Hi @yaqubb,

Thanks for writing in.

Would you mind sharing us the background image that is not responsive. As I checked your background images, I could see that it is working well.

You might want to use this functionality that will be explained below:

Hide During Breakpoint - Explained

Hope it helps.

Let us know how it goes.

Thanks.

[yaqubb]

Hi @nico,

Thanks for getting back to me and apologies for not being more specific.

When I resize the window to about tablet size, the background images go from resizing smoothly to a funky zooming back in which leaves the background image very large with too much of the image cropped. And since these sections are essential, I can’t hide them completely.

Do you have any idea what is causing it? And is it possible that my font sizes and row/column padding being sized in em instead of px could have anything to do with it?

Thanks again

[paul.r]

Hi,

That is one of the limitations of the background images.

By default your background images are set to Cover

Cover means to resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

You can change the size by adding a class to your section

Then add the code below in Theme Options > CSS

@media(max-width:767px) {
.my-section .x-bg-layer-lower-image {
    background-size:contain !important;
}
}

You may change contain to percentage to adjust the size.

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

https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

Hope that helps.

[yaqubb]

Thanks for getting back to me.

I tried different values for background-size but keep running into the spacing issue you see when comparing “cover” vs. “100%” for the value:

Is there any way around the size/spacing issue with the elements above and being left with all that dead background space?

[friech]

Hi There,

That is a thing about the background-size: cover, it is responsive in a different way, it will try to cover its entire container (section) no matter how big and tall it becomes, the reality is your site will be viewed on different screen sizes, so even if you resize the image to be fixed on your end, it will still resize on others screen.

What we can do is to adjust the background-position of your bg-image, by default background-position is set to center center so when the bg-image resize it will crop the sides saving the center part. On desktop view, background-position does not really have a noticeable effect because on desktop view the entire image is visible, but on mobile view background-position is very critical because this what defines what part of your bg-image to be the focus on.

We can do also the background-size: 100% 100%; this will ensure that your bg-image will show its entirety regardless of the screen-size, however, this will your image squeeze and/or stretch

Play with the background-size and background-position option until you get the desired look on desktop and mobile.

Hope it helps,
Cheers!