Responsive Front Page 1 image in Atmosphere Pro

Front Page 1 section of Atmosphere Pro uses Backstretch for its background image and is hence not responsive. Left and right side of the image will get cut off as we reduce the viewport width.

This tutorial provides the steps to disable Backstretch and setup the Front Page 1 image inline i.e., as a regular img element and use CSS to float the widget area on top of the image - centered like an overlay.

Note: This is at the expense of 100% viewport height for the front page 1 section.

Step 1

Disable the Javascript that sets full-screen height for the Front Page 1 section.

Inside front-page.js comment out or delete:

var windowHeight = $( window ).height() - 77;

$( '.front-page-1' ) .css({'height': windowHeight +'px'});

$( window ).resize(function(){

    var windowHeight = $( window ).height();

    $( '.front-page-1' ) .css({'height': windowHeight +'px'});

});

Step 2

Edit front-page.php.

a) Inside the atmosphere_front_page_genesis_meta() function, comment out or delete:

add_action( 'wp_enqueue_scripts', 'atmosphere_front_page_backstretch_scripts' );

b) Inside atmosphere_front_page_widgets() change

genesis_widget_area( 'front-page-1', array(
    'before' => '<div id="front-page-1" class="front-page-1"><div class="widget-area"><div class="wrap">',
    'after'  => '</div></div></div>',
) );

to