WP SITES

Log in

Show Featured Image On Single Post & Page Background

—

by

Brad Dalton

This tutorial for members shows you how to use the Backstretch jQuery script to display a featured image as the background body on each single post or page in Genesis.

If no featured image is chosen, it defaults to the background image you add in the customiser or the default you add for the customiser in your child themes images folder:

backstretch-background-image

There’s several steps you need to take assuming your theme doesn’t include backstretch:

  1. Add the main backstretch.js script to your child themes js folder.
  2. Add the jQuery which applies the script to the body of each single page and post
  3. Load and localise scripts in your child themes functions file.

No need to add a customize.php file as the custom-background function is already included in the customiser by default.

Step 1

Register for full access

Related Templates & Code

Comments

3 responses to “Show Featured Image On Single Post & Page Background”

  1. Add Different Background Image To Cover Full Body On Specific Page

    […] Show Featured Image On Single Post & Page Background Using Backstretch […]

  2. Konceptuel Avatar
    Konceptuel

    Hey Brad,
    can this tutorial be applied to WooCommerce single product page as well?

    I was thinking it could be cool if the featured product image was used as body background.

    1. Brad Dalton Avatar
      Brad Dalton

      Sure can. Simply use the is_singular(‘product’)) conditional tag

      Or you can use the is_product() conditional tag which returns true on a single product page. Wrapper for is_singular.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.