Solved

How can I make an animated background cover the whole webpage?

Swordfish1
Tourist
6 0 0

Hello, I pasted this code to make animated background:

 

 

body {
background-size: cover;
background-repeat: no-repeat;
background: url("https://cdn.shopify.com/s/files/1/0777/5603/9502/files/5c43d280ddfbd4a1b4c571874e699f8d.gif?v=1698835887") !important; /* chanage image as you like */


}






But the background gif doesn't cover whole page and they have borders. Can I make something about it so one gif would cover whole page?

New Project (91).png

Accepted Solution (1)
Artzen_tech
Shopify Partner
536 107 107

This is an accepted solution.

Please try this one.

body {
background: url("https://cdn.shopify.com/s/files/1/0777/5603/9502/files/5c43d280ddfbd4a1b4c571874e699f8d.gif?v=1698835887") !important; 
background-repeat: no-repeat!important;
background-size: cover!important;

}

 

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify

View solution in original post

Replies 6 (6)

Artzen_tech
Shopify Partner
536 107 107

Hello @Swordfish1 
Its Artzen Technologies! We will be happy to help you today.

PLease send me your store url, if applicable, the Password too.

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
Swordfish1
Tourist
6 0 0

Store url:https://kizia.pl/

Artzen_tech
Shopify Partner
536 107 107

Hello @Swordfish1 
Its Artzen Technologies! We will be happy to help you today.

Please copy the below css and replace with your css.

 

body {
background-size: cover!important;
background-repeat: no-repeat;
background: url("https://cdn.shopify.com/s/files/1/0777/5603/9502/files/5c43d280ddfbd4a1b4c571874e699f8d.gif?v=1698835887") !important; /* chanage image as you like */

}

 

 



 

Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
Swordfish1
Tourist
6 0 0

Hmmm, it's still the same. 

Artzen_tech
Shopify Partner
536 107 107

This is an accepted solution.

Please try this one.

body {
background: url("https://cdn.shopify.com/s/files/1/0777/5603/9502/files/5c43d280ddfbd4a1b4c571874e699f8d.gif?v=1698835887") !important; 
background-repeat: no-repeat!important;
background-size: cover!important;

}

 

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
Swordfish1
Tourist
6 0 0

It works thank you very much! 

If anyone  wanted to make it also not end in half page use this code: 

 

body {
background: url("https://cdn.shopify.com/s/files/1/0777/5603/9502/files/81ea6ac10c02ec59255d6d19c173b940.gif?v=169884...") !important;
background-repeat: no-repeat;
background-size: 100% auto!important;

}