Random Background image inside a div tag

I’m currently working on a site that requires a background image inside of a div tag, that upon refreshing of the page the image changes.
Originally I had this working fine, as a bg image for the body. The problem is that the body now has a bg color, and all content rests inside of a container. Inside of the container is two main divs; one for content, the other for a drop shadow. The problem, is that the div that contains the header information, is not displaying a background image. I have a feeling that the bg colors of the body, content, and shadow are over riding the header. I’ve tried solving this multiple ways using php, javascript, and css. I’m getting desperate. Any help would be greatly appreciated!

here is the link to the site i’m working on: http://www.moonstars-design.com/Redesign/RSI_Main.html

This works:


function swapPic()
     {  if(document.getElementById)
            { var thePicture=document.getElementById("header");
              var picPath="http://www.moonstars-design.com/Redesign/bg/img"+rnd(3)+".jpg";
              thePicture.style.backgroundImage="url("+picPath+")";
            }
     }
// ----------