One feature missing from the Divi Theme which can be found in some other themes is the ability to have a full-width image displayed right at the top of the page, above the main header bar. We can add such a "banner" image to Divi in the several ways:

Adding an Image above the Header with Divi Booster

To add the image above the header in Divi Booster, do the following:

Step 1: Locate the Divi Booster Option

First open the Divi Booster settings page ("Divi » Divi Booster" from your WordPress dashboard).

Then look under "Site-wide Settings » Layout". You should see an option to "Add Image before Header", like so:

Step 2: Select your Image

Click "Choose Image" and the WordPress media library will appear. Upload or select you header image.

Important: Be sure to set the image size to "Full Size" prior to clicking "Use Image", as shown:

This prevents the image from being added at a smaller size and becoming in blurry / pixelated when scaled up to fit the screen.

Step 3: Save the Divi Booster Settings

You should now be back at the Divi Booster settings page, and will see a thumbnail of your chosen image along with its URL, like so:

Scroll to the bottom of the Divi Booster settings page and click "Save Changes".

Now when you view your site, your chosen header image should display above the Divi header. Be sure to clear your site / browser cache if you do not see the image right away.

Tips and Tricks

Here are some CSS snippets that may be useful in customizing the image to your liking, whether you are using Divi Booster, or the manual method (below).

Show the Image only on the home page

You should be able to hide the header image on all pages except the homepage with one of these CSS snippets:

​
​body:not(.blog) #wtfdivi004-page-start-img,
body:not(.blog) #myprefix-page-start-img { 
    display: none! important; 
}

OR​

body:not(.home) #wtfdivi004-page-start-img,
body:not(.home) #myprefix-page-start-img { 
    display: none! important; 
}


​Which one works will depend on whether you are using the standard Divi home page, or using a separate page.

​Just add one (not both) into the Custom CSS box at Divi > Theme Options > General > Custom CSS.

Show the Image only on Posts

To show the image only on posts, add the code below into the Custom CSS box at Divi > Theme Options > General > Custom CSS.

body:not(.single) #wtfdivi004-page-start-img,
body:not(.single) #myprefix-page-start-img { 
    display: none! important; 
}

Manually Adding an Image Above the Header

Step 1: Include the image into the page

We first begin by adding the image to the HTML page and moving it into the correct location. To do so, add the following HTML code into the Divi theme footer.php (or your child theme footer.php) file just before the final </body> tag:

<div style="display:none">
    <img id="myprefix-page-start-img" src="http://www.mysite.com/my-image-url.jpg"/>
</div>
<script>jQuery("#myprefix-page-start-img").prependTo(jQuery("body"));</script>

Change the src="…" part to the URL of your image. If you don't yet have a URL for your image you can get one by uploading the image to your WordPress media library, and then viewing the information for the uploaded image.

Style tip: The image will be stretched to fit the width of the screen, so wide images will generally look better than tall ones.

Step 2: Adjust the page layout to accommodate the image

The above code puts the image into the right place in the page. But it doesn't do anything to make sure it looks good. We can fix this by adding the CSS below. The CSS achieves several things:

  • It makes the image full width on full-size screens.
  • It hides the image on mobiles, defaulting to the standard Divi mobile layout.
  • It fits the image to the width of the "box" when box mode is used.
  • As the header is now lower down the page, it delays making the header "float" until the user has scrolled down far enough.
  • It fixes up the padding and margins so there are no unsightly gaps.

While it looks complicated, you don't need to understand it to use it, just copy it into the end of the Divi theme style.css (or your child theme style.css) file and it should work.

Now, your Divi theme should show your image full width across the top of your blog (or fill the width of the box area when in box layout), with the Divi header below. When you scroll passed the Divi header, it will remain visible at the top of the screen as normal.