Full Width Responsive Header Image Always in Magazine Pro

The code in this download folder enables you to use 1 image to display in full at any screen width. The problem this solves is :

• Your header image will always display width of screen regardless of how large the screen width is.
• The text in your image, will never be cutoff.
• The space padding and/or margins before and after your image will always be maintained.
• Your image will always display fully without being cutoff even when using a fixed nav menu on desktops as is included in the Magazine Pro child theme by StudioPress.

Demo Video

Shows the header image which is 2000px by 250px display full width of screen, in full, without being cutoff at any screen width.

Tested using the Magazine Pro child theme by StudioPress.

Installation

There’s 2 steps :

1. Copy and paste the PHP code ( without the opening PHP tag ) to the end of your Magazine Pro themes functions file.
2. Copy and paste the CSS to the end of your Magazine Pro themes style sheet and clear caching.

You can then upload your header image named header.png to your Magazine Pro themes images folder.

Download Folder