How to add a grain effect on my website's background?

GAGORDER · ‎08-29-2023

My shop is Shopgagorder.com

I'm trying to achieve a grain affect similar to this website, https://sosmula.us/pages/web-store-closed

Here is another example, https://burmamfg.com/collections/store

I've tried copying and pasting the code

.grain {

height: 100%;

width: 100%;

pointer-events: none;

background: url(https://cdn.shopify.com/s/files/1/0564/7617/2332/files/GrainBackround.gif?v=1667804647);

opacity: 0;

z-index:99999999999999999999999999999999999999

}

into the "Custom CSS' section under my theme settings but it did not do anything. I also tried pasting it into the theme.scss.liquid section to no avail. I clearly have no idea what I'm doing. I'd like to imagine this should be a fairly easy request.

Thank you in advance!

dbuglab · ‎08-29-2023

Hi @GAGORDER

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the file above </Head> tag

<style>
.grain {
    position: fixed;
    height: 100%;
    width: 100%;
    pointer-events: none;
    background: url(/cdn/shop/files/grain_fg.gif?v=1617133611);
    opacity: .15;
    z-index: 99999999999999999999999999999999999999;
}
</style>

5) Add the following code in the file after <body> tag

<div id="FOREGROUND_DIV" class="grain"></div>

banned

View solution in original post

dbuglab · ‎08-29-2023

Hi @GAGORDER

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the file above </Head> tag

<style>
.grain {
    position: fixed;
    height: 100%;
    width: 100%;
    pointer-events: none;
    background: url(/cdn/shop/files/grain_fg.gif?v=1617133611);
    opacity: .15;
    z-index: 99999999999999999999999999999999999999;
}
</style>

5) Add the following code in the file after <body> tag

<div id="FOREGROUND_DIV" class="grain"></div>

banned

GAGORDER · ‎08-29-2023

That's what's up, thank you! Do you know if it is possible to push the grain effect to the background instead of the foreground so it doesn't cover the text & product images?

sprewce · ‎08-10-2024

How did you get this to work? did you directly copy and paste or does in need to be lined up (tabbed in) within the code?

Pushy123 · ‎09-30-2023

Hey, I'm usinge the Ride-Theme and did exactly what you described but it does not work unfortunately.. 🤔

How to add a grain effect on my website's background?

How to add a grain effect on my website's background?

Community Blog Articles