On desktop View, the background remains fixed while everything scrolls smoothly over it. However, this is not working on mobile View , using GIF as my background image, it glitches and splits like in the middle on mobile . I aim for the content to glide over my custom background image seamlessly on Mobile View too.
website:www.craftedtribal.in
Topic summary
A user is trying to implement a fixed background image (an animated GIF) on their Shopify store that remains stationary while content scrolls over it. While this works on desktop, it fails on mobile devices, causing glitches and performance issues.
Technical Challenge:
- Fixed backgrounds require significant processing power on mobile devices
- Some mobile browsers ignore fixed background properties entirely
- Animated GIFs compound the performance problems
Proposed Solutions:
- CSS pseudo-element approach: Create a fixed
:beforeelement on the body with the background image applied - Object-fit method: Use an
<img>element withobject-fit: cover(similar to the reference site revivaldxb.com)
Implementation Issues Encountered:
- White box glitch appearing during mobile scrolling
- Footer and policy text disappearing
- Content being overlapped by the background element
Resolution:
Setting z-index: -1 on the :before element fixed the missing/overlapping text issues. The helper noted that both approaches produce similar visual results, though they differ in SEO indexing and loading priority. Mobile scrolling over fixed images remains resource-intensive, especially with animated GIFs.
Fixed background actually requires pretty significant device processing power, that’s why it may not work as expected (or at all – some mobile browsers simply ignore it) on mobiles or may make your site unusable.
And then it’s an animated GIF, which makes things even worse
The usual workaround is to create a fixed element (or pseudo-element as in the code below) and assign background to that element instead:
body:before {
background: url({{"giphy.gif" | file_url}}) center;
background-size: cover;
content: "";
position: fixed;
width: 100%;
height: 100%;
}
The rule above is meant to replace the one you’ve added (body { .. })
I am attempting to replicate this website https://revivaldxb.com
or is it possible to use Object-fit approach to use fit the gif background ?
Thank you, this fixed the background issue for me. However, I’m experiencing an unnecessary white box glitch when scrolling down on mobile.Also my footer have dissapear
now my footer text , sub menu policies text dissapear.
Yes, that site uses img element with object-fit: cover; instead of background as suggested above.
Both approaches produce similar results.
Background approach does not introduce extra elements, image will probably be better indexed by search engines if that’s the goal.
Background image would probably be loaded later than image element since browser may prioritise actual content over background image.
Big benefit of a separate img element is that you should potentially be able to replace it with video element if wanted.
As to which one is more performant – this will require more formal testing, I can’t tell from the top of my head.
As I said, scrolling over fixed image is a heavy operation on mobile and when it’s animated GIF it is even more taxing. Mobile browsers will try to optimize, sometimes by skipping rendering some portions of the screen
(in my limited comparison both sites flashed white rectangle at the bottom).
However, I do not see missing footer on my devices…
Setting the z-index : -1 resolved all the missing text issues I was experiencing because the :before element was overlapping my text. Thank you so much for fixing it; without you, I wouldn’t have been able to figure it out.