How to fade loop background images?

jsBin demo

Full page gallery fade

I would do it using an absolute positioned DIV overlaying the body.
Fade in the DIV with a new image, then set the same image to body and hide the DIV like:
(GRAY is BODY, SOrange is DIV)

Responsive background fade gallery logic

The increment of the current image Array is achieved by preincrementing ++counter.

The loop fix is than achieved using Remainder Operator% to prevent the counter from exceeding the number of images in Array.

The loop itself is done inside .fadeTo() callback function by simply do a new iteration of the loopBg() function.

This is the needed CSS:

*{margin:0;padding:0;} /* Global reset */
html, body{height:100%;width:100%;}
body, #bg{ background: #000 none 50% / cover; }

And the jQ:

var images = [
var $body = $("body"),
    $bg = $("#bg"),
    n = images.length,
    c = 0; // Loop Counter

// Preload Array of images...
for(var i=0; i<n; i++){
  var tImg = new Image();
  tImg.src = images[i];

$body.css({backgroundImage : "url("+images[c]+")"}); 

(function loopBg(){
  $bg.hide().css({backgroundImage : "url("+images[++c%n]+")"}).delay(2000).fadeTo(1200, 1, function(){
    $body.css({backgroundImage : "url("+images[c%n]+")"}); 

Edit: If you want to keep the background changing but make the content scrollable, simply add overflow:auto; to #page like in this demo:

Leave a Comment