Using jQuery to fade in a new image
<p>Below is the image element that is acting as the background.  The position is absolute and it also has a low z-index so it stays behind the rest of the content.</p>

<pre><code>&lt;img src="day-sky.jpg" id="background" /&gt;
</code></pre>

<p>The secs below just refers to seconds in a minute.  This is just for test purposes, but I'd like to have one background image if the seconds is &lt; 30 and a different one if it's greater that 30. If possible the transition would be a nice fade to the next image.</p>

<p>I've been searching around for ways to do this but haven't come up with a good way to do it.  Any thoughts?</p>

<pre><code>function changeBackground() {

if (secs &gt; 30) {
    //have one background
}
else {
    //have a different background
  }
}
</code></pre>
