Some Background Images Won't Resize for Mobile Devices

[ConjuringMind]

I found this discussed on another topic thread, but when I tried the two different solutions offered, it didn’t work for me. The thread is also locked. Also tried on the peer to peer forum but no response yet so I thought I’d try here.

The main background image on my website just does not resize to fit on mobile, and I’ve tried several things. All of the other images do, but not the main one at the top of the page. It is used with a parallax effect. Not sure if that has anything to do with it or not as another image is also but that one adjusts nicely.

Mentalist For Hire | Comedy Magician for Event Entertainment

Any suggestions as to how to fix this?

[friech]

Hi There,

Thank you for writing in, please inspect your section and set the background position to 30% 50%

If that does not work, please have a portrait oriented version of your background-image and then please add the following custom CSS on the Section’s Element CSS area

@media (max-width: 480px) {
	.$el.x-section .x-bg-layer-upper-image {
		background-image: url(YOUR PORTRAIT ORIENTED BG-IMAGE URL HERE) !important;
	}
}

Hope it helps,
Cheers!

[ConjuringMind]

Thanks for the info @friech. Both of those did help somewhat (I tried them separately) and even edited and resized the image for a better portrait orientation but it still wasn’t appearing and behaving quite like I wanted (though far better than it was). Now I’m trying the site with the Integrity Stack instead of renew to see if that makes any difference. So far it doesn’t seem to. I suppose now I need to start asking around and get some design tips.

[ruenel]

Hello There,

Please understand how the section background images works. With Background image you can hardly achieve a total responsiveness without compromises. 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.

[ConjuringMind]

Thank you, @RueNel for the demo and the info. That is very helpful. It looks like in order to achieve some of what I’m wanting that I have to edit some of my images outside of WordPress (with overlays and text) and then upload them as straight images. I just can’t seem to make it do what I want it to and get decent looking pages on mobile as well as laptop/desktop.

[jade]

Hi there,

Yes, in some cases you will have to edit the actual image in order to achieve the result you are aiming for together with the CSS.