Categories
Genesis Tutorials

Logo Over Full Width Header Image

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 :

Related Tutorials

5 replies on “Logo Over Full Width Header Image”

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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *