Live Mobile/Tablet Background Image Zoomed In – Has A Normal Live Editor Layout Preview

Hello Athemes team. Really enjoying your work on Sydney and I love the theme, but I have run into a problem that I need your help with. I have created a Sydney front page template website using the full screen slider option with a sticky menu. Reference: My Website

I have seen several threads on this same issue but have not been able to find a CSS Code fix that works for my website in any of the previous threads. The issue is regarding the mobile/tablet view of the background image. It appears to be zoomed in instead of using the whole image or it’s not properly re-sizing itself for the different screen sizes or views. (Landscape vs. Portrait)

The image looks good in the mobile or tablet live editor preview but looks nothing like the preview when you actually bring up the website on a phone or tablet. (Samsung S8, i6 or iPad) Also, the background image looks good live using a desktop or laptop, so it’s just a tablet and mobile phone issue (tablet isn’t quite as bad as a phone). The header slider images also function perfectly so it’s just a mobile/tablet background image issue.

I realize that the image is only seen in the bottom portion of my ‘Home’ page and the entire ‘About’ or ‘Contact’ pages, but I still would like for the mobile view to look and function as close as possible to the desktop version. (Background Image Size Used: 1920 by 1281)

Any help would be appreciated.

Hello there,

Thank you for using Sydney. The solution for responsive main slider image is by going to Appearance > Customize menu. Then choose Header area > Header Slider; scroll down until you get an option that says “Slider mobile behavior” and choose responsive.

21

Regards,
Kharis

Hi Kharis, thank you for the quick response. I’ve seen your response on a previous thread and I have tried it on two separate occasions with no help; it just makes the header slider shrink dramatically in size. I did change it again and I will leave it that way so you can view it because I’m guessing that you are in a different time zone that’s very different than mine. I’ll change it back after I hear back from you.

My issue isn’t with the main header slider, it works fine. I’m using a background image for the entire site. Appearance> Customize> Background Image and I have uploaded an image with the settings Preset: Fill Screen & Image Position (arrow pointing down). The road in the image is what I want the main focus of the image to be because it follows the theme of the website. The easiest way to understand what I’m trying to explain is if one looks at the difference on my ‘About’ page from a desktop or laptop to a tablet or phone; especially the phone.

From all the previous threads I’ve read it seems to be an issue going from a Landscape view on desktop or laptop (16:9) to a Portrait view (3:4) or the image doesn’t resize or zoom out to fit the screen on smaller devices.

I’ve tried every CSS Code on every thread in this forum regarding this issue with no help. I actually tried a CSS Code that changed the Live Editor Preview to look exactly like the live version but not the opposite, which is what I’m trying to accomplish.

Any additional help or ideas are much appreciated.

Hello there,

The road seems properly be visible on my phone.

Do you have a screenshot to share?

Cover background behaves that way where center spot will remain and hide some pixels of its outer areas. Because cover background means filling out the entire screen.

If you have particular part of the image that becomes focus to display, it would be better if you upload an image in the main content area – above the paragraph.

Regards,
Kharis

Hi Kharis,

This is what it looks like on my phone and an iPad.

The image from your phone is exactly how I would like on every phone. I curious why it looks normal on your phone and not on mine. I changed the setting back to Fill Screen from Reactive in the header area. Let me know if the image still looks normal on your phone.

Hello there,

I am afraid CSS code alone can’t change the background position by adapting itself into device screen sizes. I think the easiest solution is to prepare a new image, in which the road is visible in the middle.

Regards,
Kharis

Thank you Kharis for all your help. I’ll try that.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis