Mobile Background Image Pixelation


#1

Hi,

When viewing my site via mobile, the background image appears to be very pixelated. I am not sure if the mobile theme is resizing or scaling the image in some way.

Is there any way to prevent the image proportions from being altered in the mobile theme and maintain the image’s actual size?

The website is www.justwannahang.ca for reference.

Any help would be greatly appreciated!

Thanks,
JWH


#2

We are having the same pixelation issue. Only happens on iOS, and seemed to start with the latest Sydney theme upgrade. See home page hero image for http://oneequalheart.org/. We didn’t use built-in feature – just used pagebuilder and a background image.


#3

Hello JWH,

Can you please provide some explanatory screenshots?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online screenshot services.

SGBIZ, you are using Sydney theme, not Solon, please create a topic in Sydney forum here to keep forums in good order.

Kind Regards, Roman.


#4

Roman - Thanks for the advice. I did create a topic in Sydney at the same time. I commented here, in case it would help with your troubleshooting. FYI: https://athemes.com/forums/topic/background-image-pixelation-on-ios


#5

Okay SGBIZ,

Thank you for the link.

Kind Regards, Roman.


#6

Hi Roman,

After some further testing, it looks like this issue is only occurring when viewing via Chrome from an Android mobile device. I have tested via iPhone as well as Firefox on the same Android device and there is no pixelation. Perhaps the mobile Chrome app is the issue.

Here is a screenshot of the pixelated bg image when viewed via Chrome from an Android mobile device. I have the background image set to fixed and tiled (and altering these doesn’t seem to make any difference).

Mobile SS: http://www.justwannahang.ca/wp-content/uploads/2016/11/Screenshot_2016-11-01-18-06-44-1.png

Source image: http://www.justwannahang.ca/wp-content/uploads/2016/10/jwh_small.png

If you need more information, please let me know.

Thanks,
Nadim


#7

Hello Nadim,

Please try to use the following CSS code in order to manually set background image dimensions. Please note that you will have to adjust the values in the code below if you change background image in future.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

body.custom-background {
    background-size: 229px 279px;
}

Kind Regards, Roman.


#8

Hi Roman,

This did not work, but after some more digging I believe this is a known issue with the Chrome Android app.

Regardless, your help was greatly appreciated!

Thanks,
Nadim


#9

You are welcome Nadim!

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.