Full Screen Banner with Offset. Default offset is header only.

fullScreenBannerWithOffset.js

/**
 * Full Screen Banner with Offset Value
 * 
 * Author: Zeshan Ahmed
 * Author URI: http://www.zeshanahmed.com/
 */
jQuery(document).ready(function($) {

  // To run on homepage only. Remove/update if required on other pages. 
  if ($('body').hasClass('home')) {

    var $win = $(window),
      $el = $('.visual'), // Banner selector.
      $header = $('#header'); // Header selector.

    function bannerFullScreenWithOffset() {

      // To run only on > 1024px screens. Remove/update to run on all sizes. 
      if ($win.width() > 1024) {

        var headerH = $header.outerHeight(),
          height = $win.outerHeight() - headerH;

        $el.css('max-height', height); // default is max-height, change to 'height' for fixed height. 

      }

    }

    // Run the function on 'ready' and 'resize'
    $win.ready(bannerFullScreenWithOffset).resize(bannerFullScreenWithOffset);

    // Run the function on 'load'. Also run it with 500ms delay on page load. 
    $win.load(function() {
      bannerFullScreenWithOffset();

      setTimeout(function() {
        bannerFullScreenWithOffset();
      }, 500);

    });

  }

});