Make Background Image Fixed Where It Doesn't Move On Mobile When Scrolling Through

Store Design
, ,

Topic summary

A user is experiencing an issue where their background image remains fixed on desktop (as intended) but scrolls with the content on mobile devices instead of staying in place.

Current Setup:

  • Desktop: Background image is fixed, content scrolls over it (working correctly)
  • Mobile: Background image scrolls with content (unwanted behavior)
  • A GIF is being used as the background image, which causes glitching on mobile

Proposed Solution:
A support representative from PageFly provided CSS code to fix the mobile scrolling behavior:

  1. Navigate to Online Store → Theme → Edit code
  2. Locate the theme.liquid file
  3. Paste the provided code at the bottom of the file
  4. Save changes

Status: The discussion appears to have a proposed technical solution, but no confirmation yet on whether it resolved the issue.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

My background on desktop wont move and everything scrolls over it (that’s what i want) but it doesnt do the same on mobile. How can I fix that. I want everything to scroll over my costume background image but it scrolls with it on mobile.

I set a gif as my background image and it glitches on mobile.

website url: www.craftedtribal.in

2

Hi @sangsangmiller ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly