How to adjust mobile background dimensions on Dawn theme?

Topic summary

Issue: The Shopify Dawn theme’s background looks fine in a laptop’s mobile preview but is not visible/behaving correctly on an iPhone. The requester wants a mobile-specific background with different dimensions and a parallax effect.

Key technical point: iOS does not support CSS background-attachment: fixed, which is commonly used to create parallax (a visual effect where the background appears to move more slowly than the foreground). This explains why the parallax background works in desktop/mobile preview but not on iPhone.

Suggestions: Initial feedback noted some backgrounds/boxes need adjustments to full-width, but lacked specific code. A later response provided a workaround: edit Online Store → Theme → Edit code, and paste a script/snippet before in theme.liquid to simulate or adjust the effect. Screenshots illustrate the steps and result.

Outcome: The requester confirmed the workaround is perfect and plans to use a longer background image for mobile to accommodate the lack of fixed background support on iOS.

Status: Resolved. Images/screenshots were central to understanding the suggestions and results.

Summarized with AI on February 4. AI used: gpt-5.

Hey you clever people. I have a gorgeous background on my shopify theme, but it doesn’t look as great on my mobile.

When I check the mobile version on my laptop it looks fine - but on my iphone you can’t see it.

I would like to have a spot of code to add a mobile background with different dimensions please.

Thanks in advance

password: beautybossmedia

it seems like a few backgrounds need to correct and a few boxes need to make full-width.

Can you advise what to put?

Here are some suggestions

I published my theme by mistake the website doesnt look like this. I need the background to have parallax scroll on mobile view. It doesn’t seem to work on my iphone.

When I scale down my browser on my laptop, the mobile view works perfectly. it doesn’t look right on my iphone.

Hello @Sammiejojojo

background-attachment:fixed not supported on iOS device https://developer.apple.com/forums/thread/99883

You can follow these steps:

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

  1. Open your theme.liquid file, paste the below code before

Result:

it’s not very pretty but I hope it helps

Kind & Best regards,
GemPages Support Team

No this is absolutely perfect! I can create a longer background image thankyou so much!