How to add an animated grain effect to my Shopify Dawn theme site?

[maers]

Somewhat like this https://www.sosmula.net/pages/web-store-closed but my background isn't black, it is #080808. I'd like to know how I should do it in Shopify Dawn theme specifically. Thanks in advance! My url currently: https://maers.my/

[devcoders]

Hello @maers 

For this, we will need to add an SVG image to the body.

[maers]

I believe I have one

[maers]

Yes, I have one ready.

[devcoders]

Hello @maers 

Please send me the GIF image.

[maers]

https://cdn.shopify.com/s/files/1/0900/3470/0652/files/Grain.gif?v=1738476637 here you go.

[maers]

Any luck? 😅

[devcoders]

Hello @maers 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

.gradient {
background: transparent;
}
body {
background-color: transparent; /* Ensures no solid color blocks the GIF */
background-image: url('https://cdn.shopify.com/s/files/1/0900/3470/0652/files/Grain.gif?v=1738476637')!important;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

[maers]

Is there any way to make it match the color #080808?

[maers]

Perhaps a little bit of opaque.

[devcoders]

Hello @maers 

Please add the gif image with the color #080808.

[maers]

I can't seem to do that unfortunately, is there no way to set the opacity to 0.15 or something?