How can I animate my website background like this example?

Store Design
,
1

Could anyone assist me with making the background of my website look like the following linked website? Can’t seem to figure out how to do this.

https://exoticsouls.world/collections/all

2

That would be awesome, how should we get started?

3

Hi @GarmentGarage

1: Online store > themes > Actions > Edit code > Assets > Add a new asset

https://cdn.shopifycdn.net/s/files/1/0598/3263/1453/files/star-background-gif-_no-shooting-star.gif?v=1668992315

2: Layout > theme.liquid

insert this code before 

{% style %}
       body {
          background: url({{ 'star-background-gif-_no-shooting-star.webp' | asset_url }})!important;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
      }
{% endstyle %}
2 Likes
4

Hi @GarmentGarage
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

body {
background: url("https://cdn.shopify.com/s/files/1/0598/3263/1453/files/star-background-gif-_no-shooting-star.gif?v=1668992315") !important; /* chanage image as you like */
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
1 Like
5

Hey ExpertRookie! This worked for the most part and solved my biggest problem of getting the actual background uploaded. Thank you so much! I’ve noticed that the borders for my featured collections and backgrounds are now getting in the way of the stars. How could i make those backgrounds transparent to show the star design? EX https://garmentgarage.us/pages/1-of-1-clothing Versus https://exoticsouls.world/collections/all

6

Hi @GarmentGarage

To remove the border you can use this code

.announcement-bar,
.footer__content-bottom,
.footer{
border: none!important;
}
7

Hello @ExpertRookie sorry this is quite late, i was wondering, how could upload my own gif into a link to use as my background?

Thanks

8

i was wondering if you could help me find the code to make https://cdn.shopify.com/s/files/1/0573/7486/7523/t/6/assets/Erica%20Anderson.gif?v=1702443360 as my back ground.

9

To achieve a similar animated background effect for your website, you can use CSS animations or JavaScript libraries like particles.js or three.js. The linked website appears to use particles.js to create a dynamic and interactive background. You can find tutorials and documentation online to help you implement similar effects on your own website.

Zoro To