Background Image Not displaying properly on mobile

Hello,
My background image displays great on desktop but is zoomed in on mobile. I’ve reviewed previous posts for a solution but haven’t had any luck. The website is www.strallus.com. Help would be appreciated.
Thanks,
Micah

Hello Micah,

Can you please describe how exactly you’ve set that background image?

Kind Regards, Roman.
aThemes Support

Hi Roman,
Appearance => Customize => Background Image. I set the background image to fill screen. I’ve tried different image positions but haven’t been able to resolve. Does this answer your question? Thanks!
Micah

Okay Micah, thanks, it answers my question.

I asked our Developer to check your issue, let’s see what he says.

Kind Regards, Roman.
aThemes Support

Thanks Roman. It is only the front page where I’m having this issue. The front page for mobile is pretty much unpresentable at the moment. I appreciate your help.

Hi there,

Because of the image and device ratio, a fixed background image set to cover (like your case) cannot look on mobile as it looks on desktop.

You have the same issue on all pages, not only on the homepage. Just that it’s not visible on the other pages, because they’re being covered by the white background.

The background image option (which actually isn’t controlled by the theme) is mostly meant for repeatable patterns rather than actual images.

My only suggestion for you is to drop the background image (which messes up the legibility of your text anyway) and switch to a background color. After you can just add a background image to the section you want and it would look better since it would just need to cover one section rather than having to stretch to cover the whole site.

Vlad

THank you Vlad. I’m doing what you suggested. However I am ending up with a white space in between the top section image and top of screen and the menu doesn’t become visible until I scroll down. Sorry, I’m sure it is simple but any thoughts on that? Thanks again

Ok now the menu appears after clicking “no header.” Basically I’m taking the same image from before but just making it the top section of the front page as you suggested so it won’t stretch. Just trying to eliminate the white space in between it and the menu.

Hi,

On what page is that happening? I cannot see it.

Vlad