If you don’t use Subtle Patterns yet, you’re about to be mesmerized by how it will change the way you create website designs. Subtle Patterns is a project sponsored by Toptal Designers focused on distributing professional quality background patterns for your next website project.

More than 439 patterns and still counting

More than 439 patterns and still counting

It’s recommended to use patterns instead of full-width images. The patterns repeat themselves to optimize file size and loading speed of your page.

Preview

With more than 439 patterns for download – and more coming every week – this project is a must for every Divi theme and Extra theme developer.

Important note: you can use all of the Subtle Patterns items for free. You just need to add credits in your CSS code like the example below:

/* Background pattern from Subtle Patterns */

Follow this tutorial and learn how to add background patterns to your WordPress websites.

I’ll show you 2 ways of adding background patterns. First, by simply using a class inside your Module Custom CSS. Secondly, by normally adding it using the Divi Builder.

You’ll need to use both ways depending on your design needs.

Without further ado, let’s start. I’ll show you how to enhance the design with background patterns in the same way I do for my client’s projects.

How to enhance design with background patterns

First of all, access the website and browse the patterns options. (click here)

After you find a pattern that you like for your project click Download.

When you extract the zip file you’ll find the PNG file. Maybe, there will be 2 files – one with a higher resolution. Pick the best quality pattern.

Quick tip: use the TinyPNG website to optimize the background pattern before using it in your project.

Almost done. Access the back-end of your WordPress project and add the background pattern inside Media > Add new.

Now I’m going to show you the 2 methods that I use to easily add background patterns to my project.

Method 1

Go to your Media Library and get the URL of the pattern.

Then, go to Extra > Theme Options > Custom CSS and create a class that you’ll add later to the element you want to have the background pattern.

.background-01 {
   background: url(image-url);
}

Don’t forget to change image-url to the URL of the background pattern inside your Media Library.

Finally, go to the Section, Row or Module that you want, click Advanced and add the class background-01 to the Custom CSS field.

Method 2

It takes a little longer than Method 1, but you can easily add a color gradient on top of the background pattern using this method.

Go to the Section, Row or Module that you want and change the background image in Content > Background. Just select the pattern you want to use.

Adding background patterns

Adding background patterns

Then, change the following settings to:

  • Background Image Size: Actual Size
  • Background Image Repeat: Repeat
  • Background Image Blend: Multiply
Recommended settings

Recommended settings

Quick tip: download 2 to 4 patterns to have more design options. Try to play with them in the header, footer and inside your modules. I’m sure you’ll get your layouts design to a new level.

Conclusion

Have you ever heard about Subtle Patterns?

I hope you have managed to enhance your website design with background patterns.

Please, leave a comment or send an email if you liked this tutorial. Your feedback is always important for me.

See ya!