Sridhar Katakam

Genesis and WordPress Tutorials

Setting a random full-sized background image in WordPress using Backstretch

by 8 Comments

Scott Robbin, the creator of Backstretch shared a snippet for Random Backstretch image on GitHub. Here's how it can be applied in WordPress:

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

Create a file named say, backstretch-init.js having the following code in the same location.

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

Already a member? Log in below or here.

  • Hey Sridhar!

    This is exactly what I’m looking for, but I can’t seem to get it to work. Can you check on this for me? http://ibclcsites.com/preview (the site is behind a coming soon plugin, but visiting that link directly should load it for you).

    I’ve followed your directions to the T, and it didn’t work.

    I modified the url in the functions.php code to be lib/js/ instead of /js/ because I’m using the Winning Agent Pro theme — and that’s how the folders within the theme are built out…

    Any ideas?

    Reply

  • How can I add this code to the theme sixteen pro with out conflicting with the backstretch that being used. I want rotating images on the home page and a static image on the rest of the site.
    -Scot

    Reply

  • Would it be possible to use similar code to randomize the first background image in the Genesis Parallax theme? If so, could you point me in the right direction as to which parts of the above method I would need to include and if there are additional pieces I’d need to add. Thanks so much in advance for any help.

    Reply

  • This worked great! It took me longer to decided to subscribe to your site than to implement the fix. Glad I did (the latter). Thanks.

    Reply

  • Is there a way to make it choose from images in a gallery so that the client more easily add images without having to get at the files?

    Reply
    • >