Logo Over Full Width Header Image

Mar 7, 2018

—

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.

Comments

5 responses to “Logo Over Full Width Header Image”

Winifred Williams

November 12, 2019

This worked like a dream in lifestyle pro, just fyi.

Log in to Reply
Brian Thomas

September 20, 2018

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.

Log in to Reply
1. Brad Dalton
  
  September 20, 2018
  
  Try this, includes 2 methods https://wpsites.net/web-design/full-screen-width-header-image-in-metro-pro/
  
  Log in to Reply
Brian Thomas

September 19, 2018

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.

Log in to Reply
1. Brad Dalton
  
  September 19, 2018
  
  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.
  
  Log in to Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.