How to Use Featured Image as Background with Backstretch

In February I created simple tutorial on How To Add Backstretch Background Slider To Your Theme and few day ago I needed a solution to use different background image for each page with option to change it easily. So thanks to I had the solution.

Similar to previous Backstretch tutorial get files from our assets and upload them to /wp-content/theme_name/

[sociallocker id="35746"]backstretch-background[/sociallocker]

Here is the content of backstretch-set.js

jQuery(document).ready(function($) {
$("body").backstretch([BackStretchImg.src],{duration:3000,fade:750});
});

And this part you have to add to your theme's functions.php file. It's pretty smart as it's loading scripts only on single Posts, static Pages and other single pages and only if featured image is present.

//* Enqueue Backstretch
add_action( 'wp_enqueue_scripts', 'enqueue_backstretch' );
function enqueue_backstretch() {
if ( is_singular() && has_post_thumbnail() )
wp_enqueue_script( 'backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'backstretch-set', get_bloginfo('stylesheet_directory').'/js/backstretch-set.js' , array( 'jquery', 'backstretch' ), '1.0.0' );
wp_localize_script( 'backstretch-set', 'BackStretchImg', array( 'src' => wp_get_attachment_url( get_post_thumbnail_id() ) ) );
}

Now you have to use nice image as a featured image with at least 1200px width and 1000px height to avoid pixelated background.

Thanks,
Kris

Divi 2.0 WordPress Theme

Like what you read here in this blog post? If yes, please sign up and get latest articles delivered to your email account for FREE! You’ll be also subscribed to newsletter, where I share a exclusive content and offers.

About Kris Hoja

Hi! I'm Kris. For a while I was blogging about WordPress, now I'm owner of HogStudio - Creative Agency focused on website development.
Add me on Google+ and don't forget to follow me on Twitter :)

Leave a Reply