[Resolved] Background images on iOS / tablet

[Stefan]

I have a problem with background images on iOS tablets with resolution higher than 1024px.

The following case:

I use a container with background images.
On desktop: background-attachment: fixed;
On tablet/mobile: background-attachment: scroll;

On desktop and mobile it works fine.
Only on tablets with a higher resolution (ipad pro, etc.)
the background is pixelated.

Here is the example page: http://i.curiopia.de/try/

I use Generateblocks Pro. Latest version 😉

Do you have any ideas how to fix it?

Thanks in advance!

[Bryan]

Newer generations have a retina display.

The Mini and Air are at 2048 x 1536.
10.5″ Pro is at 2224 x 1668.
11″ Pro is at 2388 x 1668.
12.9″ Pro is at 2732 x 2048.

Your image is only 1800 x 1200 and the iPad hasn’t been at 1024 x 768 since Gen 2.

Your image isn’t a high enough resolution.

[Stefan]

@bryan Thanks a lot for your reply. Unfortunately thats not the solution. Even if i use a larger image (you´ll see it on the demo-page) – the problem still exist.

The problem may be that the media-query for tablets are set to 1024px. The new tablets have higher pixels, so that the media-query of the desktop is taken. Thus the tablets use again background-attachment: “fixed” and not “scroll”. Then the distortion arises.

[Bryan]

I see—When turning my iPad horizontal, you are correct, there does appear to be a problem.

[David]

Hi there,

Try adding this media query to set the background attachment to scroll.

@media (pointer:coarse) {
    /* styles for a touch device */
}

It will detect any device that has limiting pointing accuracy which is generally the case with all touch enabled devices.

[Stefan]

Wohow!! @david it works!

Thanks a lot!
You made my day.

I appreciate your support very much.

Happy sunday!

[David]

You’re welcome

[Author]

Posts