Set WordPress featured image as backstretch.js background

Code

This is a pretty useful trick. Turn your featured image in WordPress into the background of a page element or page using backstretch.
The current page / post’s featured image will display wherever you choose as a fitted backstretch background. This is ideal for responsive WordPress sites and can resolve potential display errors on mobile.

Place .js files in header.php. It is best to do this using the functions.php enqueue method, but you can just throw them into the <header> if that suits your setup better. Don’t forget to make sure that the backstretch.js file appears in the page after the jQuery file or else you will run into problems.

//enqueue method in functions.php, place it where it belongs
wp_register_script(‘jq9’, ‘http://code.jquery.com/jquery-1.9.1.js’, array(), ‘1.9.1’);
wp_enqueue_script(‘jq9’);

wp_register_script(‘backstretch’, ‘https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js’, array(), ‘2.0.4’);
wp_enqueue_script(‘backstretch’);

<!–Or just above the </header> tag in header.php –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
<script src=”//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js”></script>

Now in your footer.php file, you can add the following just before the <?php wp_footer(); ?>

<!– Set featured image as variable $background –>
<?php $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), ‘full’ );?>