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.
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: fixedandbackground-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
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
@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;
}



