Grain background - Website
Hi! I'm trying to add some grain in the background of my website but for some reason it's flickering, do you have any ideas why? Thanks
https://philippes-portfolio-4c2f5d.webflow.io/blog
Blog - Filmax - Webflow HTML website template
Filmax Webflow template is highly suitable for creating websites for film directors, video editors, creative studios, advertising agencies, and portfolios.
8 Replies
Also, It seems the grain is over my images, I would like if it was in the background
Hey @Lars I played around with a few things but couldn't figure out what the issue is - sorry about that.
I'm seen similar flicker issue like this when there are stacking context issues (z-index)
you might try playing around with that
the github repo has some info on using it as a background too
GitHub
GitHub - sarathsaleem/grained: Generate animated noise texture with...
Generate animated noise texture with grained.js. Contribute to sarathsaleem/grained development by creating an account on GitHub.
Ok thanks for the help! I keep playing around with it!
So I made multiple test and I figured out by deleting some photos, the bug would get away. Could the picture take too much? is there a way to optimize the picture?
Oh, finally i tried keeping all the pictures and just adding some rows and the flicker stopped too. I think it make it flicker when the pages is too tall
Maybe if I could find a way to make the noise fullscreen in background instead of filling the div it would stop? Is it possible to do this?
can you send preview link?
@Lars here's how I'd do it
https://grained-js-with-photos.webflow.io/
https://preview.webflow.com/preview/grained-js-with-photos?utm_medium=preview_link&utm_source=designer&utm_content=grained-js-with-photos&preview=27265b7c24079e7c31a1fbe92fbcbab2&workflow=preview
no flickering there... though I'm not using masonry grid like you. Anything special JS/CSS there for that layout?
here's how I did my masonry grid
Ok - does the above example help? I set grained to be in a fixed div that sits behind all the content.