How to create a Grain effect in Showit

April 16, 2023

If you’re looking to create a unique and cool effect for your background on Showit website, a grain effect can be a great option. In this blog post tutorial, we’ll walk you through the step-by-step process of creating an animated grain or noise texture background in Showit.

Step 1

Upload background image and set opacity around 70-80%

Step 2

Download and upload any noise texture gif. I found my on Google

Step 3

Paste this code below with the Embed code tool:

<style>
body {
  background-image: url("paper.gif");
  background-repeat: repeat;
}
</style>

Step 4

Replace paper.gif line with the link of your grain texture .gif.

To copy the link open media library and click at little link icon. Then click on your embed code again and replace url.

with my link it looks like this:

<style>
body {
  background-image: url("https://static.showit.co/file/0CtQ1Bu-RdmeLGOxuCyguw/149657/200w.gif");
  background-repeat: repeat;
}
</style>

Step 5

Make the noise gif the same size as your screen, don’t forget to click on “Horizontal locking” so it would be locked to the left and right sides of the browser window as the window grows.

Finished!

Enjoy your beautiful and eye-catching grain background for your Showit website!

Showit website with grain texture background
Showit grain texture effect

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Leave a comment

take a quiz

Take our quiz and enjoy 15% off your template.

Struggling to choose the right template?

Find the website template that matches your brand personality!

exlpore mroe

Resources

take a look

Find a collection of my favorite tools, resources, and products for your business! From free Showit templates to websites tips. Explore and enjoy!

templates shop

shop templates

Easy to use Showit website templates are the perfect option if you are on a tight budget, on a short timeline, or want to customize a website on your own

work with me

work 1:1

With our website design template customization service, you can have a stunning and fully personalized website without the hassle of doing it yourself.

download

Ready to turn your dream website into a reality? Say goodbye to overwhelm and confusion, and hello to a step-by-step roadmap to create the website you've always wanted. Download now and start building your online presence with confidence!

free workbook

PLANNING YOUR DREAM WEBSITE

0
    0
    Your Cart
    Your cart is emptyReturn to Shop