Tim Butterfield
Slideshow Background using jQuery

A slideshow tool I created to show a series of images in the background.

Images

You will need to prepare your images into 3 sizes, desktop, tablet and mobile. In this article I have named them image_bg_1_1.jpg, image_bg_2_1.jpg, image_bg_3_1.jpg. The first number is the screen size id and the second number is the slide number.

Suggested file sizes, 1600 x 1200px, 800 x 1000px, and 600 x 800px.

You will also need an image to display between fades. I use a #333333 image which I have named image_bg_5.png.

HTML

To begin, build this structure in your HTML page. Note: divs with the id's bImg1 and bImg2 begin and close above the content div.

<div id="innerWrapper">
  <div id="bImg1"><!-- Leave Blank --></div>
  <div id="bImg2"><!-- Leave Blank --></div>
  <div id="content"><!-- Page Content Here --></div>
</div>

CSS

Below is the CSS style the slides. This will cause the bImg1 and bImg2 sit behind the content div using positions and z-index.

@media only screen and (min-width: 1241px) {
 #bImg1 {
   background: url('images/image_bg_0_5.jpg') no-repeat center top;
   background-position: center top !important;
 }
   }
@media only screen and (min-width: 800px) and (max-width: 1240px) {
 #bImg1 {
   background: url('images/image_bg_1_5.jpg') no-repeat center top;
   background-position: center top !important;
 }
   }
@media only screen and (max-width: 799px) {
 #bImg1 {
   background: url('images/image_bg_2_5.jpg') no-repeat center top;
   background-position: center bottom !important;
 }
   }
@media all and (max-width: 400px) {
 #bImg1 {
   background: url('images/image_bg_2_5.jpg') no-repeat center top;
   background-position: center top !important;
   background-size: contain !important;
 }
   }

#bImg1 {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 3;
 background-repeat: no-repeat !important;
 /*background-size: contain;*/
 }

 #bImg2 {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
   background: url('http://img.morrisonscellar.com/ImageServlet/servlet?mediatype=STATIC&id=comp_image_bg_4') no-repeat center top;
   background-position: center top !important;
   /*background-size: contain;*/
   }

jQuery

In the head section of your page, paste the following code within script tags.

This code will cycle through 4 images and fade to a fifth between each image. When the screen is resized, the script will reconfigure which images to use upon the next transition.

var bgsize = 0
 if ($(window).width() >= 800 && $(window).width() <= 1240) {
   bgsize = 1;
 } else if ($(window).width() <= 799) {
   bgsize = 2;
 } else {
   bgsize = 0;
 }
 
 var imageSet1 = ["images/image_bg_" + bgsize + "_1.jpg", "images/image_bg_" + bgsize + "_2.jpg", "images/image_bg_" + bgsize + "_3.jpg", "images/image_bg_" + bgsize + "_4.jpg"];
 var currentImageSet1 = 0;

 var imageSet2 = ["images/image_bg_5.png", "images/image_bg_5.png", "images/image_bg_5.png", "images/image_bg_5.png"];
 var currentImageSet2 = 0;

 function changeBackgroundImages() {
   if ($(window).width() >= 500) {
     img1Fade();
     setTimeout(img2Fade, 500);
   };
 }

 function img1Fade(){
   if ($(window).width() >= 500) {
     $('#bImg1').fadeOut('slow', function(){$('#bImg1').css({background: 'url(' + imageSet1[++currentImageSet1] + ')' })});
     $('#bImg2').fadeIn('slow');
     if (currentImageSet1 >= imageSet1.length - 1) {
  currentImageSet1 -= imageSet1.length;
     };
   };
 }

 function img2Fade(){
   if ($(window).width() >= 500) {
     $('#bImg2').fadeOut('slow', function(){$('#bImg2').css({background: 'url(' + imageSet2[++currentImageSet2] + ')'})});
     $('#bImg1').fadeIn('slow');
     if (currentImageSet2 >= imageSet2.length - 1) {
  currentImageSet2 -= imageSet2.length;
     };
   };
 }

 $(document).ready(function(){
   if ($(window).width() >= 500) {
     setInterval(changeBackgroundImages, 20000);
   };
 });

if ($(window).width() >= 500) {
 $( window ).resize(function() {
   var bgsize = 0
   if ($(window).width() >= 800 && $(window).width() <= 1240) {
     bgsize = 1;
     imageSet1 = ["images/image_bg_" + bgsize + "_5.jpg", "images/image_bg_" + bgsize + "_1.jpg", "images/image_bg_" + bgsize + "_2.jpg", "images/image_bg_" + bgsize + "_3.jpg"];
   } else if ($(window).width() <= 799) {
     bgsize = 2;
     imageSet1 = ["images/image_bg_" + bgsize + "_5.jpg", "images/image_bg_" + bgsize + "_1.jpg", "images/image_bg_" + bgsize + "_2.jpg", "images/image_bg_" + bgsize + "_3.jpg"];
   } else {
  bgsize = 0;
     imageSet1 = ["images/image_bg_" + bgsize + "_5.jpg", "images/image_bg_" + bgsize + "_1.jpg", "images/image_bg_" + bgsize + "_2.jpg", "images/image_bg_" + bgsize + "_3.jpg"];
     }
 });
   };

All that's left now is to tweak the code to your needs. Enjoy.

Tim ButterfieldSlideshow Background using jQuery

Images

HTML

CSS

jQuery

Tim Butterfield
Slideshow Background using jQuery