Change 'background-image' in 'body' tag after specific time interval

Question

body{
    background-image: "image.jpg";
    }

How can I change the background image suppose 'image1.jpg,image2.jpg...' after 5s.

Found this script on StackOverflow for changing the image, but I also need to change it after few seconds and also Without Click

<script type="text/javascript">
$(document).ready(function() {
    $('body').css('background-image', 'url("image2.jpg")');
});
</script>

Possible duplicate of [How to change background on every 5s](http://stackoverflow.com/questions/6440952/how-to-change-background-on-every-5s) You would need to change `10000` to `5000` though. — yuriy636, Apr 16 '17 at 18:00
@yuriy636, I did check toggle the background-image, without clicking i.e. by time interval and was not able to find it. Hence had to post the question. If there is any such question and I skipped it, my apologies. And Daniel solved the problem. — Dhaval Jardosh, Apr 16 '17 at 19:28

Dalin Huang · Accepted Answer · 2017-04-17T02:46:49.440

7

put your urls or img path inside the array, it will loop through every image. started with first one.
use setInterval if you need this keep running forever. (setTimeout will run once per call)

$(document).ready(function() {
  var urls = ['https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg', 'https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg', 'https://img.wikinut.com/img/gycf69_-6rv_5fol/jpeg/0/Best-Friends-Img-Src:Image:-FreeDigitalPhotos.net.jpeg', 'http://www.travelettes.net/wp-content/uploads/2014/03/IMG_3829-Medium-600x400.jpg'];

  var cout = 1;
  $('body').css('background-image', 'url("' + urls[0] + '")');
  setInterval(function() {
    $('body').css('background-image', 'url("' + urls[cout] + '")');
    cout == urls.length-1 ? cout = 0 : cout++;
  }, 5000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

edited Apr 17 '17 at 02:46

answered Apr 16 '17 at 18:43

Dalin Huang

11,212
5
32
49

Yes @DanielH, your answer is just perfect. – Dhaval Jardosh Apr 16 '17 at 19:23
Everything works fine but at the end there is a blank image for 5 sec. Can you help with that? I am trying to figure out the solution, but it's now working out. – Dhaval Jardosh Apr 17 '17 at 01:18
@DhavalJardosh you are right, I found the problem. it is this line: `cout == urls.length-1 ? cout = 0 : cout++;` the array with 4 urls have length of 4 but the index are 0,1,2,3. so we need to put length-1 to match the last urls index which is 3 – Dalin Huang Apr 17 '17 at 02:49
that's just perfect! – Dhaval Jardosh Apr 17 '17 at 20:59

G-Cyrillus · Answer 2 · 2017-04-16T20:08:43.013

6

you can also use a CSS animation:

body {
  background:url(http://lorempixel.com/400/400/people/1);
  animation: chbg 15s infinite alternate;
  background-size:cover
}
@keyframes chbg {
  0% {
    background:url(http://lorempixel.com/100/100/people/1);
  background-size:cover
  }
  20% {
    background:url(http://lorempixel.com/100/100/people/7);
  background-size:cover
  }
  40% {
    background:url(http://lorempixel.com/100/100/people/6);
  background-size:cover
  }
  60% {
    background:url(http://lorempixel.com/100/100/people/2);
  background-size:cover
  }
  80% {
    background:url(http://lorempixel.com/100/100/people/9);
  background-size:cover
  }
  100% {
    background:url(http://lorempixel.com/100/100/people/8);
  background-size:cover
  }
}

edited Apr 16 '17 at 20:08

answered Apr 16 '17 at 18:56

G-Cyrillus

101,410
14
105
129

@DhavalJardosh i updated snippet with infinite animation (and decreased quality of bg , lorempixel is sometimes slow) – G-Cyrillus Apr 16 '17 at 20:09
1

That's Great! I am working on smooth transition of images. This method is quite simple. – Dhaval Jardosh Apr 16 '17 at 21:00
@DhavalJardosh if you planned to fade bg, you might want to take a look at this codepen https://codepen.io/gcyrillus/pen/DJdja It uses animation and pseudo elements to do the fading . It is a 4 years old demo but still up to date at this time for the CSS fading effect in bg . You can rework animation for pseudos in order to include extra image and also add image to body also . Timing will need to be tuned so image are changed will element is not visible. https://codepen.io/gc-nomade/pen/rmOVJM – G-Cyrillus Apr 17 '17 at 21:04

score 1 · Answer 3 · answered Apr 16 '17 at 18:08

do you mean something like this . You can fill the array of colours with image paths!

var counter=0;
var colours=["red","green","blue"];

$(function() {
    change();

    function change() {
       setTimeout(change,5000);
       
    $('body').css('background-color', colours[counter] );
    
    counter++;
    
    if(counter==3){ counter=0;}
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 4 · answered Jan 25 '21 at 07:54

Easy Way To Do Is That with Function run code to chek

function run(interval, frames) {
    var int = 1;
    
    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }
    
    var swap = window.setInterval(func, interval);
}

run(1000, 10); //milliseconds, frames

#b1 { background: hsl(0, 50%, 50%); }
#b2 { background: hsl(30, 50%, 50%); }
#b3 { background: hsl(60, 50%, 50%); }
#b4 { background: hsl(90, 50%, 50%); }
#b5 { background: hsl(120, 50%, 50%); }
#b6 { background: hsl(150, 50%, 50%); }
#b7 { background: hsl(180, 50%, 50%); }
#b8 { background: hsl(210, 50%, 50%); }
#b9 { background: hsl(240, 50%, 50%); }
#b10 { background: hsl(270, 50%, 50%); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<html>

<body>

<body>



</html>

Change 'background-image' in 'body' tag after specific time interval

4 Answers4