Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How to add static gif background to my store?

How to add static gif background to my store?

LeviHUN98
Excursionist
22 0 4

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.

Replies 9 (9)

Abdosamer
Shopify Partner
937 173 193

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. 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
LeviHUN98
Excursionist
22 0 4

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
Shopify Partner
937 173 193

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
LeviHUN98
Excursionist
22 0 4

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: 

IMG_3560.png

LeviHUN98
Excursionist
22 0 4

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
Excursionist
22 0 4

 It should be like this like in the editor:

IMG_3562.jpeg

Abdosamer
Shopify Partner
937 173 193

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
LeviHUN98
Excursionist
22 0 4
    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
Visitor
2 0 0

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

zjakers_0-1709182845243.png

 

And I wanted it to look like this site:

zjakers_1-1709182958527.png