How to add static gif background to my store?

[LeviHUN98]

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.

[Abdosamer]

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

<style>
body{
background-image:url(" your gif url")!important;
background-position: center;
background-size: cover;
}
</style>

Hope this helps you. 

[LeviHUN98]

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

[Abdosamer]

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

[LeviHUN98]

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: 

 

[LeviHUN98]

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]

 It should be like this like in the editor:

[Abdosamer]

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

[LeviHUN98]

    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;
}
</style>
  <style>
body {
    background-size: cover!important;
}
</style>
</html>

[zjakers]

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: