Solved

How can I animate my website background like this example?

GarmentGarage
Excursionist
15 0 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

Accepted Solution (1)

ExpertRookie
Shopify Partner
1518 249 315

This is an accepted solution.

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;
}
- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.

View solution in original post

Replies 8 (8)
GarmentGarage
Excursionist
15 0 1

That would be awesome, how should we get started?

Kani
Shopify Partner
468 125 225

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?... 

2: Layout > theme.liquid

insert this code before </head>

{% 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 %}

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
CozyBeanies
Visitor
1 0 0

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.

ExpertRookie
Shopify Partner
1518 249 315

This is an accepted solution.

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;
}
- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
GarmentGarage
Excursionist
15 0 1

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

ExpertRookie
Shopify Partner
1518 249 315

Hi @GarmentGarage 

To remove the border you can use this code

.announcement-bar,
.footer__content-bottom,
.footer{
border: none!important;
}
- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
Sidoine1
Visitor
1 0 0

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

ZoroTo
Visitor
1 0 0

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