3 Ways To Add Responsive Background Images & Slideshows In Genesis Using Backstretch

In this post, we’ll take a look at 3 different ways you can add responsive background images in any child theme running Genesis.

Here’s the different options i have already tested locally and used on client sites:

1. Easy Backstretch plugin – Reviews
2. WP Backstretch – Code Snippets
3. Adding Backstretch manually – Tutorial

Easy Backstretch plugin

This is a free plugin which combines the WP Cycle plugin developed by Genesis lead Developer, Nathan Rice & the Backstretch script by S Robbins.

The plugin makes it super easy to add a background image to any element because you only need to enter the CSS class into the plugin settings.

The plugin only enables you to add your images (s) to one element and doesn’t offer conditional settings unlike what WP Backstretch offers.

If you only want to add a slide show or one image to one HTML element then this is a good solution for non coders.

The plugin has been developed by Marco Galasso.

WP Backstretch

This is a premium plugin developed by Andrew Norcross who contributes to the ongoing development of Genesis. The big advantage of owning this plugin is the support which i have personally experienced when needing an addon to make it work with an older theme.

The support provided by Andrew was amongst the best i have ever received from any plugin Developer. I highly recommend this solution if you need customization support for loading different images on different pages conditionally, other than what the plugin already includes out of the box.

Single Post & Page Options

This plugin also includes support for both single images and slide shows as well as support for single posts and pages.

You’ll find a new box like this on all single post and page edit screens which makes it super easy to enable or disable according to you own preferences.

Code Snippet Examples & Simple Documentation

On top of this, you can also use filters to modify the plugins output to control exactly where your background image displays.

The plugin site offers a range of code snippets for every filter which makes it easy to customize even for non coders:

Examples include code for custom post types, default single & gallery overriding filters.

The documentation for customizing this plugin is very simple so you can find what you want quickly and simply copy & paste the code snippet into your child themes functions file.

If you need customization options, this is the best option in my opinion.

WP Backstretch Plugin

Adding Backstretch manually

Adding Backstretch to your theme manually requires a basic understanding of how to install Javascript & PHP code.

If you’re a beginner, this tutorial is very easy to follow however maybe be challenging if you want to control which pages or HTML elements you want to use to display your background images.

Here’s a step by step tutorial about how to install the Backstretch script manually in Genesis.

Related Templates & Code

• Backstretch Slide Show For Widget Background Images
• Genesis Page Templates for Background Images