Parallax background image distortion on ipad pro

[lancebarton]

The iPad Pro has a massive resolution and I think that is why the solution here:

Fix for parallax issue on ipads

Isn’t working. I know that for whatever reason we can’t have beautiful scrolling parallax images like they have on squarespace, but it’s important to be able to have just the still image instead of the zoomed in parallax image on ipads. Apparently based on resolution the solution above works, but not on ipad pro - is it because it’s a pad (no parallax) and it has a huge resolution?

How can we take care of this so things look nice on an ipad pro without having to go back and create additional sections for every single parallax image on a site with many pages?

As always, thank you so much for your help!

[Alaa]

Hi @lancebarton

The same code in the shared thread should work fine on iPad Pro if you modified the line that says:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)

Especially this part max-device-width : 1024px to be something larger, for instance 1100px as I believe the the logical resolution for iPad Pro is 1366 x 1024.

In case this didn’t work, then please share a URL with this issue so we can investigate it.

Thanks.

[lancebarton]

It didn’t work. The iPad Pro resolution is 2732 x 2048 - here is a page sample:

Sports Field Drainage - Natural & Synthetic Grass Drainage

Whether in portrait or landscape I would like the parallax images to look normal, even if they can’t parallax scroll.

[friech]

Hi Lance,

Please look for your device’s media query here (see Tablets > iPads)

Then use this selector .x-bar .x-bg .x-bg-layer-lower-image {}

Then the CSS properties that was a applied from the other thread you shared.

background-attachment: scroll !important;
height: 100% !important;
overflow: hidden;

I have found the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!