Sridhar Katakam

Genesis and WordPress Tutorials

How to set Featured image as full-sized background for Posts and Pages in WordPress

by 27 Comments

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element.

In this tutorial I show how featured image, if present for singular pages can be set as full screen background using Backstretch.

Screen-Shot-2014-02-04-at-10.48.35-PM

featured-image-full-screen-background-wordpress

Step 1

Upload jquery.backstretch.min.js to child theme directory/js.

Step 2

Create a file named say, backstretch-set.js having the following code and upload it to the same location.

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Very elegant, I am using something like this

    add_action ( ‘genesis_header’, ‘add_banner_image’, 999999999);
    function add_banner_image() {
    if ( has_post_thumbnail() && (is_page() || is_single()) ) {
    $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), ‘full’ );
    echo ‘ ‘;
    echo ‘ body.custom-background { background-image: none; } #bgnew { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; z-index: -9999; } #bgnew img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%;} ‘;
    }
    }

    Let me try your solution.

    Reply

    • Hi Kenneth, Sorry to ask this non related question. I looked at the website and wonder how you made the boxes on the home page. They look great and it’s exactly what I need for the site I’m now building. Thanks!

      Reply

  • Thanks! This really helped me out 🙂

    If you don’t want to have the background images an all pages, put: ” && in_category(‘categoryname’) ” in the first if statement.

    /C

    Reply

  • Great tutorial! I set everything up and I want it to target my div #header_hero. The site is here: http://www.newgridpower.com/test-page/ And I think I have everything set up right. I have

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

    for backstretch-set.js and I had to modify the pathway a bit in the other file to get to my skin:

    //* Enqueue Backstretch script
    add_action( 'wp_enqueue_scripts', 'enqueue_backstretch' );
    function enqueue_backstretch() {

    //* Load scripts only on single Posts, static Pages and other single pages and only if featured image is present
    if ( is_singular() && has_post_thumbnail() )

    wp_enqueue_script( 'backstretch', get_bloginfo( 'url' ) . '/wp-content/thesis/skins/new-grid/js/jquery.backstretch.min.js', array( 'jquery' ), '1.0.0' );
    wp_enqueue_script( 'backstretch-set', get_bloginfo('url').'/wp-content/thesis/skins/new-grid/js/jquery.backstretch.min.js' , array( 'jquery', 'backstretch' ), '1.0.0' );

    wp_localize_script( 'backstretch-set', 'BackStretchImg', array( 'src' => wp_get_attachment_url( get_post_thumbnail_id() ) ) );

    }

    What am I missing? I see the image URL in the source code but it is not displaying on the site??

    Thanks in advance!
    Steve

    Reply

  • Great tutorial! This worked out great for me. I was just curious if there was a way to set a maximum height on the backstretch image. I love the height on the desktop version of my site (http://journeydevsite.com/services/), but I’d like to decrease the height a bit for mobile devices. Is that change made in the jquery.backstretch.min.js file?

    Reply

  • This helped out tremendously. I do have one question. Is there a way to set up a default image if a feature image isn’t set?

    Reply

  • Thanks, this looks great. I do have a question though. How can I implement this without it being full sized? I would the featured backgorund image to be 800px X 400px, centred at the top of the page right under the header/navigation.

    Reply

  • Hi, I have followed your tutorial, but I do not see any result. I am new with Genesis. I wonder if there’s something missing. Do you have any idea why the image could not see in the background?

    Reply

  • Is there a way to merge this with blur.js? It’s working beautifully as is, but I would love to put some opacity and blur to the background.

    Cheers

    Reply

  • How would I set the backstretch to apply only on larger screens, and then display the featured image above the content on mobile displays?

    Reply

    • Hey Nick,

      You can achieve this with a little CSS within a media query. Something like this:

      @media only screen and (max-width: 600px) {
      .single .site-inner {
      padding-top: 550px;
      }
      }

      Reply

  • Hey Sridhar,

    I followed this to a “T” and I am not seeing the intended result. No featured image loads in background. I get 2 JS errors. “Failed to load resource: the server responded with a status of 404 (Not Found)” for jquery.backstretch.min.js, and a “Uncaught TypeError: $(…).backstretch is not a function” for backstretch-set.js. I confirmed that both files are in the proper location. Any ideas?

    Thanks in advance for any assistance.

    -B

    Reply

  • Does anyone have a responsive solution to have the featured image scale, and not crop on smaller screens? Thanks in advance for any assistance!

    Great tutorial! Looks great on desktop.

    -B

    Reply

  • Hi Sridhar

    Bit late to the party on this one. When I implement this, I get the full-screen background, but I also get horizontal and vertical scroll bars, which makes it possible to infinitely scroll up/down and left/right. Is there a fix for this?

    http://focused-projects-co-uk.stackstaging.com/investment/

    Hover over the main content area, until scroll bars appear, and you can use the mouse wheel (or shift + mouse wheel) to scroll forever.

    Thanks
    Dom

    Reply
    • >