Creating a full browser width header image that has a fixed height for browsers wider than a specific width, but that scales down proportionally for browsers under the specified width
On very large browsers, when the browser gets smaller, the header image gets cropped right and left but stays the same height.
Below the specified width, and as the browser keeps getting smaller, the header image will scale down proportionally (width AND height).
This offers the benefit of the header image scaling down on mobile devices so the header image height remains proportional to the device, while preventing the header image from becoming too high on large browsers while remaining full browser width.
Open the demo site page below on a very large browser, then reduce the browser width and observe how the header image changes.
http://demo.weavertheme.com/full-width-bg/
Method:
• Using an image editor, create an image that has the maximum width and height you want for large browsers (like 1920 x 200 px)
• Save that full image to be used as the header-image area background image.
• Then crop a middle portion of that image as wide as the width from which the image will scale with the browser (ie:1024 x 200px), and save that to be used as the actual header image.
• Select the cropped file as the header image in Appearance > Header
• Use Main options > Header > Header Image > Use Actual Image Width option If you have plus. If you don’t add the rule below in Main Options > Fonts & Custom > Custom CSS Rule box
#branding #header-image img {width:auto;}
• Select Center in the Header Image Align option
• Then add the rule below to the custom CSS Rule box (Main options > Fonts & Custom > Custom CSs Rule box) to put the large 1920px wide image in the background of the header container
#header-image {background:url(LargeImageURL) bottom center no-repeat;}
Note: If this will only be done for a specific page, you will need to add the page-id class selector in front of the rules like
.page-id-xxx #header-image {background:url(LargeImageURL) bottom center no-repeat;}
replacing xxx by the page ID number