• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Show Featured Image On Single Post & Page Background

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

  • Featured Image As Background Image
  • Genesis Page Templates for Background Images

Background Image

Reader Interactions

Comments

  1. Konceptuel says

    March 24, 2015 at 8:16 pm

    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.

    Log in to Reply
    • Brad Dalton says

      March 24, 2015 at 10:39 pm

      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.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.