Add Multiple Site Background Images To Genesis Agency Pro Theme

You can add a multiple images as alternating site background images in the Genesis Agency Pro theme by tweaking the backstretch jQuery plugin that comes with the theme.

Out of the box Agency Pro uses one master site background image as set in the Customizer, preferably at 1600 x 1000px.

Prepare your images

Get your images ready at 1600 x 1000px and file them either in the uploader or in an images directory, have their URLs handy.

Create a Background Slider

Edit the main Backstretch function

Edit the main backstretch function in functions.php as above I have commented out the lines I no longer need, this is the code the ties the customizer image to the Backstretch jQuery plugin.

Edit the Backstretch script

In your js/backstretch-set.js file add the following…

So here just add in your images and correct paths – and that’s it done.

Load Alternate Images on Page Load

Instead of a slider you could also load different background images each time the page loads, to do this edit the backstretch script to be like the below.