How can I fix the banner image on both desktop and mobile?

Store Design
, ,

Topic summary

Goal: Make the Shopify banner image stay fixed (parallax-style) on both desktop and mobile. The merchant’s own attempt with background-attachment: fixed did not work.

Actions taken: A helper provided code to add in theme.liquid to achieve the fixed banner. The merchant confirmed, then reported that on mobile the banner looks overly zoomed. The helper supplied an updated code snippet (content not visible here) intended to address mobile scaling.

Issue persists: The merchant said the updated solution didn’t work and shared a screenshot showing the problem.

Clarifications requested: The helper asked for a valid store preview link (noting the prior one expired and the password was wrong) and explained that results depend on the banner image’s aspect ratio (e.g., 4:3, 1:1, 9:16). They suggested selecting the desired image first so adjustments can be tailored.

Latest update: The merchant provided a new, working preview link.

Status: Unresolved and ongoing; pending access confirmation and potential CSS adjustments based on the chosen image’s aspect ratio to fix mobile zoom behavior.

Summarized with AI on January 16. AI used: gpt-5.
1

Hi,

I would like to have the image banner fixed, I’ve tried with banner-attachment: fixed but it’s not working.

How can I solve it? Both desktop and mobile version.

https://c168e5.myshopify.com/

pw: mieneefd

Thank you guys, this is the last task to do before launching my very first online shop

2

Hello @danbot , You can do this, by simply adding the below code into your theme.liquid file anywhere.

Regards,

Osama Farooqi

3

Thanks Osama :slightly_smiling_face:

4

Now I have issue with the size of the banner in the mobile version, how can i solve it? It looks too zoomed

5

Now I have issue with the size of the banner in the mobile version, how can i solve it? It looks too zoomed

6

No worries @danbot , there we have an updated piece of code. Please replace it.

Regards,

Osama Farooqi

7

Hi,

Thanks for your answer, but it’s not working :confused:

I see this

Schermata 2023-10-03 alle 16.31.58.png
Schermata 2023-10-03 alle 16.31.58.png704×1066 75.1 KB

8

Hello @danbot , can you please confirm the store preview link, it expires in 2 days. Also, the password shows wrong.

Moreover, it’ll also depend on the image, expect ratio. Some images are long some are short but their width is high like 4:3 , 1:1 , 9:16. Please choose any pic you want and then we’ll need to adjust it accordingly.

Regards,

Osama Farooqi

9

I’M SORRY, HERE THE LINK :slightly_smiling_face:

https://avdxrnb1yxk8yi5h-76040929610.shopifypreview.com