Over the past 6 months I’ve learned and documented a load of tips, tricks and tweaks for the amazing Divi theme and decided it was about time I wrote some of them up. There’s a huge community of Divi developers out there and many of their blogs have helped me figure stuff out that I’d have otherwise struggled with, so I’d like to start by saying a special thanks to the following folk for their brilliant tutorials:

• Gino Quiroz
• Michelle Nunan
• Tim Strifler
• Josh Hall
• Ania Romańska

Why have a tiled background?

It’s a fair question! I actually wanted to use a patterned background behind a few sections and apply css parallax to them. I found a pattern image I liked, but the file size was large at the recommended 1920px wide. I wondered if I could crop the image down to a small repeatable part of the pattern and tile that as the background, then apply parallax over the top. That would significantly reduce page load times as the tile image was a tiny section of the original.

And here’s how I did it…

Create the Tile

Find a repeating pattern image you like. Use an image editor to crop it down to the smallest repeatable section that will evenly repeat vertically and horizontally.

Here’s the pattern image I started with:

As you can see, it has shading across it so I had to be careful and create a very small tile from a section that was consistent with shading, otherwise the final tiled background might look a bit uneven.

Make your tile as small as possible, just large enough to be fully repeatable both ways. Here’s the tile I created:

Now you have your ’tile’ image, load it up to your media gallery.

Apply the effect

As first it sounded like it might be complicated, but all it takes is these 6 lines of CSS:

background-image: url(IMAGE URL);
background-attachment: fixed;
background-repeat: repeat;
background-position: top center;
background-size: initial;

Remember to replace IMAGE URL with the path to your tile image file.

That’s it! Simple right?

Applying the Code

You can either apply the code directly to the section using the Divi Builder or create a new CSS Class in your Child Theme (assuming you are using one!) and then apply the new class to your section.

1. Using the Divi Builder

Open up the settings for your section, go to the Advanced Tab and paste the code into the Main Element section, like this:

Save the changes and you’re done!

2. Using your Child Theme

In WordPress go to the Appearance > Editor option and edit your style.css file. Add this code to create the new CSS class:

.tiled-parallax-bg {
background-image: url(IMAGE URL);
background-attachment: fixed;
background-repeat: repeat;
background-position: top center;
background-size: initial;
}

Save it and go back to your section, open the settings and into the Advanced tab again. Then enter tiled-parallax-bg into the CSS Class field, like this:

Simple as that. The section below has the section applied, so you can see the effect:

Have a great day!

About the Author

Ed Solman
Enqore Studio Director

Entrepreneur, Blogger and Website Designer. Passionate about helping people and businesses develop and grow. Daredevil sportsbike enthusiast.