Solved

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

GAGORDER
Tourist
5 0 0

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!

Accepted Solution (1)

dbuglab
Shopify Partner
473 51 50

This is an accepted solution.

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

Replies 3 (3)

dbuglab
Shopify Partner
473 51 50

This is an accepted solution.

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
Tourist
5 0 0

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?

Pushy123
New Member
4 0 0

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