Adding Multiple Fading Images To A Background with jQuery

You can add multiple sliding/fading images to a background HTML element using the Backstretch jQuery plugin, this is great if you just want to alternate a number of images behind another web page element similar to a slider but without the overhead of using a slider plugin.

Image Preparation

Generally you’ll want to optimize your images for the most average viewable size, so for example if it’s full screen desktop you’ll need to get a width at least between 1200px to 16oopx at a decent compression, say jpeg level 7 in Photoshop, if the background images are more abstract in nature and the image is less defined you can probably get that jpeg compression down to a level 3 of 4.

Setting up the jQuery Backstretch plugin

Download the latest version and file the backstretch.min.js in your theme’s js folder, you’ll also want to create an initialize file for the jQuery plugin, in this example called backstretch-init.js – then also move to your theme’s js folder.

The content of the backstretch-init.js file will apply the backstretch image effect to the element we are targeting, so in the code below…

Loading the Scripts

Now these files will need to be enqueued for WordPress to load them, so add this in your functions.php file

So here we are loading the backstretch files, when the initialise script backstretch-init.js is called it is calling for backstretch-min.js which in turn is calling for jQuery.

That’s it, load in as many images as required and adjust the fade and duration values to suit.

Further ref and ref