title: Changing the Background image based on time (javascript)
body: <p>In the code below I change the background color based on the seconds left in the timer. I am trying to figure out if there is a way to change the background image based on the time.</p>
  
  <p>I have tried to add the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var imgArray = ['something.jpg', 'something2.jpg'];
  function changeColor(){
   if (seconds &lt;= 300 &amp;&amp; seconds &gt; 90) {
    document.body.style.background = imgArray[0];
   }
   else if (seconds &lt;= 90 &amp;&amp; seconds &gt; 30) {
    document.body.style.background = imgArray[1];
   }
   else (seconds &lt;= 30 &amp;&amp; seconds &gt;= 0) {
   document.body.style.background = imgArray[0];
   }
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>This however does not work. I am unsure what I am doing wrong. Below is my full code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var seconds = 300; //Variables for the code below
  var countdownTimer;
  var colorChange; //sets up array of colors
  colorChange = ['#7ed473', '#fff194', '#fa8283', 'white']
  function secondPassed(){
   var minutes = Math.floor(seconds/60); //takes the output of seconds/60 and makes rounds it down. 4.7 = 4, 3.7 = 3. (to keep the minutes displaying right)
   var remainingSeconds = seconds % 60; //takes remainder of seconds/60 and displays it. so 270/60 = 4.5 this displays it as 30 so it becomes 4:30 instead of 4.5
   if (remainingSeconds &lt; 10) {  //if remaining seconds are less than 10 add a zero before the number. Displays numbers like 09 08 07 06
          remainingSeconds = "0" + remainingSeconds;  
      }
      document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; //displays time in the html page  5:06
      document.getElementById('countdown2').innerHTML = minutes + ":" + remainingSeconds; //displays the time a second time
     if (seconds == 0) {
    clearInterval(countdownTimer);  //keeps value at zero once it hits zero. 0:00 will not go anymore
    alert("Time is Up, Try again");
    }
  };
  
  function changeColor(){ //this changes the background color based on the time that has elapsed
   if (seconds &lt;= 300 &amp;&amp; seconds &gt; 90) {  //green between 5:00 - 1:30
    document.body.style.background = colorChange[0];
   }
   else if (seconds &lt;= 90 &amp;&amp; seconds &gt; 30) { //yellow between 1:30 - 30
    document.body.style.background = colorChange[1];
   }
   else if(seconds &lt;= 30 &amp;&amp; seconds &gt;= 0){ // red between 30 - 0
   document.body.style.background = colorChange[2];
   }
  };
   
  function countdown(start){ //code for the button. When button is clicked  countdown() calls on secondPassed() to begin count down.
   secondPassed();
   if (seconds != 0) { //actual code to decrement the time
   seconds --;
   countdownTimer = setTimeout('countdown()', 1000);
   changeColor();  //calls the changeColor() function so that background changes
   start.disabled = true; //disables the "start" button after being pressed
   }
   if (start.disabled = true){ //if one of the 'start' buttons are pressed both are disabled
   start2.disabled = true;
   }
  };
  
  function cdpause() { //pauses countdown
          // pauses countdown
          clearTimeout(countdownTimer);
  };
      
  function cdreset() {
          // resets countdown
          cdpause(); //calls on the pause function to prevent from automatically starting after reset
          secondPassed(); //reverts back to original secondPassed() function
    document.getElementById('start').disabled = false; //Enables the "start" button that has been disabled from countdown(start) function.
    document.getElementById('start2').disabled = false; //enables the 'start2' button. same as above.
    document.body.style.background = colorChange[3]; //Resets background color to white.
  };
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="newTicket2.0.css"&gt;
  &lt;script src = "Timer2.js"&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload = "cdreset()"&gt;
  &lt;div id = "timerBackground"&gt;
  &lt;span id="countdown" class="timer"&gt;&lt;/span&gt;
  &lt;div id = "timerButtons"&gt;
  &lt;input type="button" value="Start" onclick="countdown(this)" id = "start"&gt;
  &lt;input type="button" value="Stop" onclick="cdpause()"&gt;
  &lt;input type="button" value="Reset" onclick="cdreset(seconds = 300)"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id = "timerBackground2"&gt;
  &lt;span id="countdown2" class="timer"&gt;&lt;/span&gt;
  &lt;div id = "timerButtons2"&gt;
  &lt;input type="button" value="Start" onclick="countdown(this)" id = "start2"&gt;
  &lt;input type="button" value="Stop" onclick="cdpause()"&gt;
  &lt;input type="button" value="Reset" onclick="cdreset(seconds = 300)"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>My question is how do I get the code to change the background image rather than just changing colors?</p>