Divi Theme - Menu and Footer, Bottom Bar Background Images

I’m a big Fan of the Divi Theme for WordPress from Elegant Themes. It’s packed with easy to use site builder features and the developers are focused with consistent updates. However, sometimes you might need a little more tweaking not (currently) readily available.

In example, one of my clients wanted to use an image for the background areas of the menu and the Divi footer bottom bar as you can see in the image to the left (click to enlarge). Unfortunately, Divi does not provide an option for this seemingly simple task. Fear not! You can easily add images to these areas by adding a bit of code to your CSS file. Use either the built-in Divi Custom CSS feature to add these codes, or add to your Child Theme CSS. NOTE: Please use a Child Theme, it’s the best way to ensure your site modifications do not get “wiped out” when you update WordPress and/or the Divi Theme.

Here is the Code:

For the footer, what Divi calls the “Bottom Bar”, add this:

#footer-bottom {background:url(your-image-link-from-your-media-library) no-repeat center center; background-size:cover !important}

For the menu, add this:

#main-header {background:url(your-image-link-from-your-media-library) no-repeat center center; background-size:cover !important}

That’s all there is to it! If you are squeamish about making these modifications, just call the WordPress Guy! I’ll do it for you!

Share This