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 :
This worked like a dream in lifestyle pro, just fyi.
Hello Brad:
I’m hoping to have the header expand across the width of the screen not just 1140px. So I think what I need is information on how to have two background images. One background image would cover the entire page and the other which is the header would be at the top of the page. When I tried I was able to get both background images on the page, but wasn’t able to get the “header” image as the top background image. I was trying to use the z-index property, but didn’t have success. Thanks for your help.
Try this, includes 2 methods https://wpsites.net/web-design/full-screen-width-header-image-in-metro-pro/
Hello Brad:
I’m using the Metro Pro theme and I’m trying to get a full-width header background similar to this website – https://www.melickstownfarm.com/. I’ve used a couple of your tutorials and can’t get the header to expand across the entire website background. The size of the my image is 2000 x 190, but it only expands only half of the width. Any help is appreciated.
Firstly, to clarify, Metro Pro is not full screen width so i assume you’re referring to adding a full width header image which will be about 1140px in width rather than full screen width?
Try this tutorial written specifically for your theme https://wpsites.net/web-design/metro-pro-full-width-header-image/
Otherwise, i’ll work out another solution.