r/csshelp • u/NeonGuy21 • 14d ago

Universal solution to fixed background on mobile devices

Has anyone found a universal solution to fixed backgrounds in CSS that works on both android and ios? I've tried body:before, a separate fixed div, and more but everything I've tried causes flickering on android, ios, or both

3 Upvotes

72% Upvoted

2

u/Dvdv_ 14d ago

Flickering? Is there z-index or transform:translateZ on it? I know what you mean as background-attach:fixed does not work on IOS but the solution should be an IMG element set position:fixed, object-fit:cover

1

u/equinusocio 13d ago edited 13d ago

What’s wrong with the background-attachment property? It works everywhere. If it doesn’t, it might be due to other conflicting properties, such as a fixed position on the element or other stacking-context-related properties.

1

u/RedditCommenter38 12d ago

‘body::before { content: ‘’; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(‘your-background-image.jpg’) no-repeat center center / cover; z-index: -1; /* Keeps it behind all content */ }’