Metro Pro Full Width of Site Header Image

This tutorial enables you to add a responsive full width header image to the Metro Pro child theme by StudioPress. On top of this, the code adds your image to the background of the site header so you can also display:

• The contents of the header right widget area including a search form and social media follow icons
• Your site title
• A logo added to the header image setting in the WordPress customizer

Here’s an example showing the full width header background image with a search box in the header right widget area:

The 2nd example shows the site title and search box:

The 3rd example displays the logo image added via the customizer.

The tutorial also includes the following sample CSS to:

1. Position the search form in the header right widget area
2. Position the site title
3. Position the header image

/* Search Form */
.header-widget-area .search-form {
    margin-right: 20px;
}

/* Text Title */
.title-area {
    padding-left: 20px;
    padding-top: 16px;
}

/* Header Image */
.header-image .site-title {
    padding-left: 20px;
    padding-top: 16px;
}

You’ll also find code to:

• Remove the Site Title & Description
• Remove the Header Image upload setting from the WordPress customizer

Demo Video

The demo video shows you how you can change the background image, display a logo image which floats over the header background image or display your site title over the image. Any widget added to the header right widget area also displays over the header image.

Here’s the code to add your full width header image:

Related Tutorials

• Metro Pro – Image Behind Header & Menu
• Full Screen Width Header Image In Metro Pro