title: Adding a background image under a background color function
body: <p>I have the three functions running on my interactive pet (change background, dimmer lights, mouse follow). I'm trying to add an image to the background of the body, but every time I try it gets pushed to the top and the dirty/clean tank function doesn't work. Could someone tell me how to change the color sections of the first function below to switch between images instead of color codes? I think that would solve the immediate problem. :/</p>
  
  <p>CSS Code:</p>
  
  <pre><code>//change background color: dirty/clean tank
  setTimeout(function dirty() { //sets background color to murky green
  document.body.style.backgroundColor = ****"#CCCC99";** //would like this to be an image**
  var btn = document.body.appendChild(document.createElement('button'));
  btn.appendChild(document.createTextNode("Clean the tank!"));
      document.body.style.marginTop = "-1000px";
  
  btn.onclick = function clean() {
      btn.parentNode.removeChild(btn);
      document.body.style.backgroundColor = **"#CCFFFF";//would like this to be an image**
      setTimeout(dirty,27000); //how long it takes to make the tank dirty
  };
  },500); //first loading of clear blue timeout
  
  
  //dim the lights
   var dimmed = 0;
  function toggleLights()
  { 
  var dimmer = document.getElementById("dimmer");
  if(dimmed == 0) dimmed = 1;
  else dimmed = 0;
  
  if(dimmed == 1)
  {
      dimmer.style.opacity = 0.8;
      dimmer.style.visibility = "visible";
  }
  
  if(dimmed == 0)
  {
      dimmer.style.opacity = 0.0;
      dimmer.style.visibility = "hidden";
  }
  }
  
  
  //fish moves on mouse hover
  $(document).ready(function() {  
  $("#swim").mousemove(function (event) {
  var fish = $("#fish1");
  var position = fish.position();
  var mousey = event.pageX;
  
  
  if (position.left &gt; mousey) {
      $("#fish1").html("&lt;img src='images/happy.png' /&gt;");
  } else {
      $("#fish1").html("&lt;img src='images/happyback.png'/&gt;");
  }
  
  $("#fish1").stop().animate({
      left: event.pageX,
      top: event.pageY
  }, 300);
  });
  }); 
  </code></pre>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;HTML&gt;
  &lt;HEAD&gt;
  &lt;TITLE&gt;Untitled&lt;/TITLE&gt;
  
  
  &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;  
  
  &lt;script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"
  &lt;/script&gt;
  &lt;script type="text/javascript" src="pet.js"&gt;&lt;/script&gt;  
  &lt;script type="text/javascript" src="core.js"&gt;&lt;/script&gt; 
  
   &lt;/HEAD&gt;
  
  
  
  &lt;div id="table"&gt;
  &lt;div id="dimmer" onClick="toggleLights()"&gt;&lt;/div&gt;
  &lt;a href="javascript:toggleLights();"&gt;&lt;img src="images/table-lamp.png" height="380px" 
  alt="table lamp"&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  
  &lt;div id="swim"&gt;
  &lt;div id="fish1"&gt;&lt;img src="images/happy.png"/&gt;&lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>