- This topic has 12 replies, 2 voices, and was last updated 5 years, 2 months ago by
.
Hi,
I am finding that the background image of my website is not responsive. On mobile it does not shrink the image down and looks very zoomed in. See attached.
My settings are on preset – ‘Fill Screen’ Image position – centered.
Hi @lorena.redzepovski,
I hope you are well today and thank you for your question.
I visited your shared site and saw the image is shrunk as shown in the attached screenshot.
Have you managed to achieve it?
Best regards,
Shufflehound teamHi,
I am not seeing that. I have tested on both android and iPhone and I get the same effect. Is there a reason why that might be?
Thanks
I could confirm the issue on another mobile device.
You can resolve it using the solutions shared in the below pages.
https://stackoverflow.com/a/23420490
Sorry, cant see what I’m meant to use? Can you please offer a more specific solution?
You can try resolving it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media (max-width: 767px) { html body.custom-background { background-attachment: scroll; } }If it still doesn’t get resolved then would you mind if I log in to your site and do some troubleshooting? If this is ok then could you please temporary share me your site admin login details privately by adding them in the box having text “Enter your private content here (only you and forum moderators will be able see it)”?
It doesn’t look like that worked. Is there a reason why the background isn’t responsive?
Yes you can login, I am staging at the moment though so you would need to log into the staged version. How can I give you the details?
It is a limitation of the mobile browser as described in the above shared links.
I have resolved the issue using below custom CSS code so could you please check it now?
@media (min-width: 767px) { html body.custom-background { background-size: cover; } }Sorry, its not displaying quite as I want. See images attached.
On my current website the background goes all the way down the divider and looks like a background, but in this version its small and displays like an image behind rather than a background.
I achieved the same on your staging website by removing body background image and setting the background image to row as shown in the attached screenshot.
Could you please check it now?
Yes, I achieved the same however as you can see in the image attached it does not extend all the way down on desktop.
