Here's what I have going on. I have these two images at the very top of my body - they will serve as the background to the page.

1.       <img src="image1.jpg" id = "background" >
2.       <img src="image2.jpg" id = "background_hidden">

1.       
2. #background {
3.     width: 100%;
4.     height: 100%;
5.     z-index: -1;
6.     position: absolute;
7. }
8. 
   
9. #background_hidden {
10.     width: 100%;
11.     height: 100%;
12.     display: none;
13.     position: absolute;
14.     z-index: -1;
15. }

Here's where javascript comes in. I'd like to have a simple method like this

2. function changeBackground() {
3.     
4.     if (secs > 30) {
5.         //have image1
6.     }
7.     else {
8.         //have image2
9.     }
10. }

The variable secs refers to the number of seconds in a minute.  If the seconds is > 30, then have image1.  As soon as the number of seconds cycles over 0 it should fade to image2.

I've been looking for ways to do this and am completely stuck.

Any insight would be great.