Code Snippet


Divi Version: 2.4+

  • Difficulty

Add a Transparent Background Image to the Header

For an added touch of originality, you can actually use an image as the background in your header. However, whichever image you choose should be of an adequate size to actually act as a header.
All you have to do is upload your new background to your WordPress media files and place its URL below where it says yourimagegoeshere.png. The rest of the code is meant to modify its opacity (so the colors don’t overpower the rest of the elements in your header), set its edges and specify its z-index as below all other elements.
#main-header::after {
content: "";
background-image: url('yourimagegoeshere.png');
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;