How do I get a gif to endlessly loop on my homepage?

Store Design
, ,
1

The image itself in my photo gallery endlessly loops but when i add it as the main banner on my homepage it doesnt look but cuts off. How can I fix this for an infinite loop? thanks

Btw im a complete beginner so try to make it easy to understand if you can!

2

Hi @Faew

Please share your store URL so I can give you the solution

3

Hello @Faew ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → theme.scss.liquid file or base.css

Add this following code at the bottom of page

.main-banner {
  background-image: url('your-image-url.jpg');
  background-size: cover;
  animation: loopBackground 20s infinite alternate;
}

@keyframes loopBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

Save and preview

Hope this can help.

Transcy

4

Thank you! I tried this but to no effect…am i meant to do anything after in the ‘edit theme’ section where i first uploaded the banner image? Am I supposed to not have this code at the very bottom after but rather somewhere else? I inserted it both at very bottom as you asked and about thanks!

5

oopsie double post

6

Hello thank you for responding-the page is www.viridismagica.com! Thank you