This solution enables you to add a full width background image which covers the entire site header container. And, you can also addd a logo which floats over the top of the background image.
Here’s how it looks using the Outreach Pro theme :
Both images are added via the customizer as you can see in the following demo video.
Here’s how it looks using the Genesis Sample child theme :
This tutorial has been written in response to a question from a member :
I’m trying to modify the site header in Outreach pro to utilize a full width background image in the site-header area and still use a logo image on top of that.
Demo Video
Shows how you can add both the full width background image and logo via the customizer so the logo floats over the background image and centre’s on smaller screens.
You can also add a default background image named header.jpg to your child themes images folder.
Tested using the Genesis Sample & Outreach Pro child themes by StudioPress however should work on most Genesis child themes without modification.
Modification & installation are included for registered members.
Installation
There’s 2 simple steps :
Step 1 : From the download folder, upload the folder named header to your child themes root directory.
Step 2 : From the download folder, copy & paste the PHP code from the functions.php file to the end of your child themes functions file.
Register or login to access the code in the download folder :
Was This Tutorial Helpful?