Sometimes getting creative with your background or slider images can result in some cool effects for your header and menu area. This requires a little forward thinking, the right image(s) and the right color scheme to pull it off. Here’s how.

Divi allows you to modify the background color of your header area in the Appearance / Customize settings. However, it does not allow you to set any transparency which is needed in order to create the desired effect. Here’s an example from a site using Divi that utilizes this photo background / transparent menu look: www.graniteoffers.co.uk

Note the color of the menu items and the header background. It’s important to use the right color, light or dark, against the header background and image underneath. Otherwise your menu could look like a washout if the text is too dark, for example.

Here’s the code and explanation:

#main-header {
    opacity: 0.7;
}

Or, you could also include the color as well and completely ignore the Appearance / Customization settings. For example, like this:

background-color: rgba(1, 1, 60, 0.7)!important;

Due to the spacing defaults for the Divi sections you will most likely need to adjust the CSS for padding and margins for the background/slider image. In that example site they adjusted it as so using a custom class which you can assign to any Divi element in the page builder element’s dialog box:

.homepic {
margin-top: -145px;
padding-top: 115px;
}

This moves the background image up and under the header/menu area so the transparency effect really works. Under normal circumstances the section or slider starts below the header/menu which would not allow the image to be visible through the transparent header. So, you have to move it up!