Full Width Header Image With Header Right Widget Content Over Image

Generally, you would use the built in custom header function when adding a image to your header.

The only problem is, when you use the custom header function coded into your child themes functions file, to add a full width header, your header right widget area no longer works.

To get around around this, you can use CSS to add your header image instead.

In this tutorial, i’ll provide the step by step instructions and CSS which results in something like this example:

As you can see in the above screenshot, the image extends full width of the site header, not full width of the screen.

The CSS in this tutorial is tested on the Magazine Pro child theme by StudioPress and may need modifying for use on other themes.