CODEWITHSUNDEEP
javascripthtmlcssimage
user3212660
user3212660

Reputation: 1

How Do I Make My Background Image Change Every 15 Seconds Or So Via CSS & JS

What I need it to do is change the background randomly every 15 seconds or so.
JS:

<script>
    (function () {
        var curImgId = 0;
        var numberOfImages = 5; // Change this to the number of background images
        window.setInterval(function () {
            $('body').css('background-image', 
             'url(/images/background_images' + curImgId + '.jpg)');
            curImgId = (curImgId + 1) % numberOfImages;
        }, 15 * 1000);
    })();
</script>

CSS:

body {
    margin:0;
    /*background-image:url(images/background_images/image1.jpg);
    background-image:url(images/background_images/image2.jpg);
    background-image:url(images/background_images/image3.jpg);
    background-image:url(images/background_images/image4.jpg);*/
    background:url(upload.js);
    background-size:cover;
    background-repeat:no-repeat;
}

A list of images I am going to use

http://mrsnapatya.net/screenshot1.png

the file directory is /images/background_images/

So any clue what I'm doing wrong?

Upvotes: 0

Views: 353

Answers (1)

Mukesh Soni
Mukesh Soni

Reputation: 6668

url function needs a string - 

$('body').css('background-image','url("images/background_images/image' + curImgId + '.jpg")');

Upvotes: 2

Related Questions