how can I reload a “CSS background-image” each time onclick?

Question

From the past three days, i have been looking to reload a “CSS background-image” each time you click on it. I have not found any relevant answers please help me...

Sorry for my bad english.

Possible duplicate of [Javascript: Get background-image URL of
](http://stackoverflow.com/questions/14013131/javascript-get-background-image-url-of-div) — Ulug'bek, Dec 23 '16 at 12:44
Reload it for what reason? what changes were made? does it load in a new/dynamic image? What have you tried so far? Your question isn't detailed enough to get the help you seek. Please take a look at this http://stackoverflow.com/help/how-to-ask — NewToJS, Dec 23 '16 at 12:46

score 1 · Answer 1 · answered Dec 23 '16 at 12:56

1

So you are looking for something like this I assume?

var images = [
  'http://placehold.it/500x320/07f',
  'http://placehold.it/500x320/f70',
  'http://placehold.it/500x320/7f0',
  'http://placehold.it/500x320/0f7'
],
    i = 0,
    n = images.length;

$("#change-image").click(function(){ 
   $("body").css({backgroundImage: "url("+ images[i++ % n] +")" });
});

html, body{height:100%;}
body{
 background: red none 50% / cover; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="change-image">CHANGE</button>

answered Dec 23 '16 at 12:56

that's a pretty cool solution. question: what's the `% n` for? why not just `[i++]`? – freginold Dec 23 '16 at 15:27
never mind, dumb question, I see it now, to keep looping even as `i` increases past the array length. – freginold Dec 23 '16 at 15:28

how can I reload a “CSS background-image” each time onclick?

1 Answers1