How to add static gif background to my store?

Topic summary

A user is trying to add a static GIF background to their Shopify store (sektorseven.hu), similar to the Bronze56k shop reference site.

Main Issue:

  • The GIF background displays correctly in the Shopify editor but doesn’t work properly on actual mobile devices
  • On mobile, the background moves/scrolls with content instead of remaining fixed, and appears sized incorrectly

Technical Details:

  • User implemented CSS code with background-attachment: fixed and background-size: cover
  • The desktop/editor preview shows the desired static effect
  • Mobile browser behavior differs from the editor preview

Current Status:

  • Another user requested the full CSS code to troubleshoot
  • A third participant mentioned achieving similar results but encountered a transparency issue with the cart tab
  • The discussion remains open with no definitive solution provided for the mobile display problem
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.

Hi, i work on my store sektorseven.hu and I want to put gif to the background just like on this website: https://shop.bronze56k.com However its not working appropriately on mobil. On my page the gif moves with the entire content.. it should be static like on the bronze website.

Hi @LeviHUN98 , you can add a gif background to your store by going to theme.liquid and add this code before the tag :


Hope this helps you.

I already put my gif to the background: https://sektorseven.hu the problem is, when i open the site on my mobile its not working like on this refference site: https://shop.bronze56k.com

@LeviHUN98 , “On my page the gif moves with the entire content.” can you explain further what do you mean here?

Please open sektorseven.hu on your actual mobile device and youll see its not working like should be. The background image is sized up and when i scroll its not static. Its looks like this when i open on my actual phoen:

So yeah, when i see the mobile view in the shopify editor its all fine, but when i open on my phone its not the same

It should be like this like in the editor:

@LeviHUN98 , can you paste the code you used to add the background gif?

background: url(https://cdn.shopify.com/s/files/1/0787/4537/0952/files/Untitled.gif?v=1701959765)!important;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed!important;
}
.gradient{
    background: transparent;
}

  

I managed it, but when I click on the cart the tab becomes transparent, if you can help me

And I wanted it to look like this site: