How to Put a Background Image in the Divi Header:

 

If you’re looking for something a little more customized and special than the standard header for your website, this tutorial is for you. In this post, I’ll show you how to put a background image in the Divi header without using a WordPress plugin.

 

The Divi header is extremely customizable, making it easy to create a gorgeous header that stands out and truly reflects your brand.

 

In my example, I’m going to be showing you how to put a background image in the Divi header, using a gray marble image.

 

This pattern will help you create a cool, minimalist look for your site.

 

But of course, you can add virtually any repeating texture or background image you want to your Divi header.

 

Some great image options to set as a background in the Divi header:

 

-Tiled images or repeating patterns of any kind

-Images without borders

-Images that don’t contain text

-Abstract images that will look great regardless of cropping

 

You can find a huge variety of fantastic background images, for free, at Unsplash or Pexels.

 

Later on in the post, I’ll also show you how to put a background image in your Divi footer area.

 

Alright, let’s get started!

 

How to Put a Background Image in the Divi Header Area, Step-By-Step 

 

Step 1: Select the background image you want use in your Divi header and upload it to your Divi media library.

 

Make sure your image is properly compressed/optimized.

 

The last thing you want is a huge image in your header slowing down your page loading.

 

To upload your image, navigate to your site’s dashboard and scroll down to “Media”. Select “Add New”.

 

How to put a background image in the Divi Header Menu

 

Here, under “Upload New Media”, either drag and drop your image or press “Select Files” to upload it from your computer files.

 

Put a background image in the Divi header menu, Divi guide

 

Your image will now be uploaded into your media library.

 

Put a background image in the Divi header navigation

 

Step 2: Now head back into “Media”, and select “Library”. This will open up your library and you’ll see that the image you just uploaded is the first image visible.

 

Here, click the image you uploaded. This will take you to a screen containing your image’s information. Beside the field that reads “URL”, you’ll see your image’s URL. Select this URL and copy it.

 

Then close this screen and head back to your dashboard.

 

How to put a background image in the Divi header, tutorial

 

Step 3: Now it’s time to put your selected background image in your Divi header.

 

To do so, you’ll need to add a little CSS to either your child theme (the best option, if you have one).

 

If you don’t have a child theme for your website, you can also place the following snippet of CSSS into the Divi Custom CSS area.

I’ll show you how to do this below:

 

The CSS snippet to put a background image into your Divi header is: 

#main-header { 
background-size: initial; 
background-repeat: repeat; 
background-image: url()!important;
} 

 

Important Note: In between the two empty parentheses that come after “background-image: url”, be sure to paste the URL you copied earlier of the image you want to use as the background of your DIvi header.

 

So, for example, if your image’s URL was:

 

https://examplesitethemeguide12.com/wp-uploads/marble-image-3253710.jpg

 

In the CSS snippet above, between the two parentheses that come after “background-image: url”, you would place your URL like so:

 

 #main-header { 
background-size: initial; 
background-repeat: repeat; 
background-image: url(https://examplesitethemeguide12.com/wp-uploads/marbleimage3253710.jpg)!important;
}

 

Make sure that whatever your selected image’s URL is, you paste that exact URL into the two parentheses, as shown above.

 

So go ahead and copy this CSS snippet.

 

Step 4: Now, in your dashboard, head to “Divi >> Theme Options”.

 

put a background image in the Divi header, CSS

 

In the “General” tab, scroll down to the “Custom CSS” area.

 

In this field, paste the CSS snippet you copied just now.

 

How to put a background image into the Divi header navigation menu

 

Make sure you put your own image’s URL in the two parentheses that come after “background-image:url”.

 

Next, click save and you’ll see a green and white check sign. This lets you know that your changes have been successfully saved.

 

Step 5: Finally, navigate to the front-end of your website and click refresh. (If you have a cache tool like the SG supercacher, hit “purge cache” at the top of the page, to ensure your changes can be seen.)

 

You should now be able to see that the background image you selected shows up in your Divi header, like this:

 

Put a background image in the Divi header without a plugin

 

Congrats –you’ve successfully put a background image in the Divi header!

 

 

How to Put a Background Image in the Divi Footer Area

 

This quick trick isn’t limited to just the Divi header — You can also put a background image in the Divi footer just as easily.

 

This is a great way to add a cohesive, put-together look to your site if you use the same background image you put in your Divi header.

 

To put a background image in the Divi footer:

 

Step 1: Copy the same CSS snippet you used above to put a background image in your header.

 

 

Step 2: This time, you’ll want to change the ID from #main-header to #main-footer, because you’ll be applying this code to the footer instead of the header.

 

 

Your CSS should look like: 

#main-footer {

background-size: initial;

background-repeat: repeat;

background-image: url(https://examplesitethemeguide12.com/wp-uploads/marbleimage3253710.jpg)!important;

}

 

Important Note: Again, just as you did above, make sure that you put your own image’s URL in the parentheses after background-image: url.

 

Step 3: Head to your dashboard and go to “Divi >> Theme Options” and in the “General” tab, go to the “Custom CSS” field.

 

Here, paste the above code ( with your own image’s URL in the parentheses) and hit “Save Changes”.

 

Once saved, you’ll see a green and white check.

 

Step 4: On your website’s front-end, hit refresh. If you have a caching plugin, clear the cache and you’ll notice that your footer now has the same background image as your header.

 

How to put a background image in the Divi header and footer area

 

The Wrap-Up:

 

And it’s really that easy!

 

Adding a background image to your header and footer is a super-simple way to create a more professional, polished looking website for yourself or your clients.

 

With just a couple of clicks and a single snippet of CSS, you can take your site’s appearance to the next level.

 

I hope this quick tutorial has helped you figure out how to put a background image in the Divi header and footer areas.

 

Have you put a background image in the Divi header or footer of your site yet?

 

Share a link to your results or any questions you have on this tutorial below!