Parallax image pixelated

[anncox1289]

please see screenshot. the image is pixelated. I have tried 1200 px and 2526 px both at 72 dpi. what is the ideal width to avoid this pixelation?

thanks

[Prasant]

Hello @anncox1289,

Thanks for asking.

1. If you are using Jetpack and in that you have activated photon module, please try to disable the same. I have seen users facing image getting pixelated and it was Jetpack that’s causing issue.
2. Please make sure that you are using latest version of X Theme and Cornerstone on the website.
3. If above solutions, don’t workout please try testing for plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

For image sizing, please take a look at following article.

https://xthemetips.com/size-matters-the-x-image-guide/730/

If the problem is still there, please share website address for us to take a closer look.

Thanks.

[anncox1289]

hi,

i am not using jetpack, nor know what that is. i am using the shortcode x theme has provided for this theme.

here is the actual code:

[content_band no_margin=“true;” style=“color: #333;” bg_image=“http://biotobody.com/wp-content/uploads/2018/09/parallax_image_home_page-1-300x199.png” border=“all” parallax=“true” inner_container=“true” style=“min-height: 400px;”]

the website address is : biotobody.com

i would like to know how to resolve this ASAP as I have a deadline.

thanks,

[ruenel]

Hello There,

Based from your shortcode:

[content_band no_margin="true;" style="color: #333;" bg_image="http://biotobody.com/wp-content/uploads/2018/09/parallax_image_home_page-1-300x199.png" border="all" parallax="true" inner_container="true" style="min-height: 400px;"]

You are using 300x199 image dimension. You should be using the full image so that the image will not be stretched out and become pixelated. You are supposed to use this:

[content_band no_margin="true;" style="color: #333;" bg_image="http://biotobody.com/wp-content/uploads/2018/09/parallax_image_home_page-1.png" border="all" parallax="true" inner_container="true" style="min-height: 400px;"]

I could not check if this is the correct full image since the image does not exist in your server. Your image for the parallax background should be at least 1900x800 in dimension.

Hope this helps.