Archived topic
Background images on iOS / tablet
6 replies · Started by Stefan on January 16, 2021
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!
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.
@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.
I see—When turning my iPad horizontal, you are correct, there does appear to be a problem.
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.
Wohow!! @david it works!
Thanks a lot!
You made my day.
I appreciate your support very much.
Happy sunday!
You're welcome
