Most themes which offer a header image as one of its options have a common problem: the entire image often does not get displayed, i.e., the header is too short or the sides of the image get cut off, especially as the screen width gets narrowed. The reason behind this is that in most cases, the theme sets the background-image property of a header element to display the image. The problem with that approach is that the header element does not take on the dimensions of the background image like it would if an actual image element (<img>) were used. The theme has to set the dimensions of the header element using CSS, and most of the times, the ratio of the width to height doesn’t match the image’s dimension ratio.

This tutorial is an example of how to get around that limitation using Javascript (more precisely, jQuery). That is, as you resize the width of this particular post, you will see that the header automatically scales so that the entire image is always displayed.

The first thing you need to do is to create a header image that will have the right proportions. It should be as wide as the widest width of your header element. For example, the content (and header) on this site is set to be a maximum of 960px, so I need a header image that is at least 960px wide. If you have a header that spans across the entire width of the browser window, you may want to create a header image that is about 2048px wide. When you create the image, make a note of the dimensions of the image. For example, the dimensions of the image that I am using above is 2048px wide by 810px tall.

Next, you need to figure out which element has the background or background-image property set to display your header image. If you know how to use a web debugging tool like Firebug or Chrome Developer Tools, it should be fairly easy. Sometimes it’s going to have a class called site-header or an ID called masthead, but it just depends upon the theme. You are going to need this piece of information so the script knows what element to change.

The next thing you need to do is add some jQuery/Javascript that will set the event handler for the window resize event. Use a plugin like Header and Footer. The script will look like this:

<script>
var image_width = 2048;  // Set this to the width of your image
var image_height = 810;  // Set this to the height of your image
var image_ratio = image_width / image_height;

jQuery(document).ready(function($){

   // This line sets the header to the correct height once the window is loaded
   // In place of #masthead, set the CSS selector used for your theme's header element
   $('#masthead').css("height", $('#masthead').width() / image_ratio);

   // This section is the event handler for the window resize event.
   // When the window is resized, the header height is adjusted.
   // In place of #masthead, set the CSS selector used for your theme's header element
   $(window).resize(function(){
      $('#masthead').css("height", $('#masthead').width() / image_ratio);
   });
});  
</script>

Note the first two lines of the script is where you will set the dimensions of your image. The script will then calculate the width to height ratio and use it to adjust the height when the window gets resized. Also note that because the header element on my page has an ID of masthead, the script uses the #masthead CSS selector. If the header element for the theme that you are using has a class of site-header, then you would change all instances of #masthead to .site-header.

That’s pretty much it. You may need to add some media queries to adjust the font size of the site title, for example, because your header is going to shrink in height quite a bit at narrow (e.g., cell phone) widths.