Divi Theme: Easy Tiled Footer Backgrounds

Divi Tips & Tricks | 1 comment

Create elegant tiled footer backgrounds with this simple Divi tip.

The Divi theme by Elegant Themes is pretty awesome – I like it so much that I use it as a starting point for 99% of my work – but I find the footer customisation options a bit limited.

Sure, it’s just a website footer and it doesn’t have to be mind-blowing but sometimes you need to go beyond Divi’s default options to get what you are looking for.

Here is a super quick tutorial showing how you can replace the simple Divi coloured footer background with a repeated/tiled image background.

From this…

Divi_Theme_Preview

To this…

Divi_Theme_Preview

Or this…

Divi_Theme_Preview

With so many options for different backgrounds you’ll never have to settle for a single solid colour again.

Ready? Here goes!

Divi Tiled Footer Background Code

Simply add the following code to your Custom CSS panel found in Divi > Theme Options.

/* REPEATED FOOTER BACKGROUND */
#main-footer {
 background-color: none;
 background-image: url("REPLACE WITH YOUR IMAGE URL");
 background-repeat: repeat;
}

Then add your own tiled image URL to the part where it says ‘REPLACE WITH YOUR IMAGE URL’.

And that’s it!

Keep reading if you aren’t familiar with where you should upload your background tile or to find more than 50 free background tiles to choose from.

 

55 Free Tiled Background Images (And How To Use Them)

Tiled images work great for this because the file sizes are so small that they barely add any additional load time.

Supernova Themes have an awesome collection of 55 background tiles which work perfectly for this.

55_Small___Lite_Background_Images_for_Website_You_Can_Repeat___Supernova_Themes

All you have to do is find the effect you want…

55_Small___Lite_Background_Images_for_Website_You_Can_Repeat___Supernova_Themes

Right click on the small image tile and choose ‘Save Image As…’

55_Small___Lite_Background_Images_for_Website_You_Can_Repeat___Supernova_Themes

Once you’ve saved the image to your computer you should then upload it to your WordPress website.

Upload_New_Media_‹_Worth_it_Media_—_WordPress

Once your file has uploaded you’ll then need to find the image URL. Simply click on ‘Edit’ next to your uploaded image.

Upload_New_Media_‹_Worth_it_Media_—_WordPress

Then copy the ‘File URL’.

Edit_Media_‹_Worth_it_Media_—_WordPress

You’ll then need to paste this URL into the code below where is says ‘REPLACE WITH YOUR IMAGE URL’:

/* REPEATED FOOTER BACKGROUND */
#main-footer {
 background-color: none;
 background-image: url("REPLACE WITH YOUR IMAGE URL");
 background-repeat: repeat;
}

So there you have it, a tiles background effect for your Divi website footer.

Questions or comments? Be sure to leave them below.

Have a great day!

1 Comment

  1. Douglas

    It did not work here.

    Reply

Submit a Comment

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

Let's make something great together.