getting a slideshow using background images

getting a slideshow using background images

hi - i am new to jquery and have the following situation;
I have preloaded the images i want to use into an array and want to cycle thru 
indefinitely each image in the array, and use the each  function on the array.
The array is var imgs = [];

I have a div such as this
<div id="mydiv"></div> 

&  with current styling such as this -
#mydiv {
background-image: url(myimg.jpg);
background-repeat: no-repeat;
background-position: 20px 20px;
}

i've tried a few extensions such as  http://www.malsup.com/jquery/cycle/ which came pretty close,
but not quite what i need. 
The reason i cannot use it is that there is another graphic that has to sit ONTOP of the other sliding images,
and most slide show scripts cover that one image, rendering it useless. So i need to just swap out the background images in a slideshow manner, somehow. 
using the array.each i should be able to cycle thru the images and fadeIn and fadeOut, but so far 
i am unable to see anything but the last image listed in the array.
For example with this snippet ( without using each ) but just trying to prove the concept here...

$('#mydiv').css('background-image','url(myimage1.jpg)');
$('#mydiv').fadeIn('5000');  
$('#mydiv').fadeOut('5000');
$('#mydiv').css('background-image','url(myimage2.jpg)');
$('#mydiv').fadeIn('5000');

only the last image shows up...
I am going around the bend ( turning green, red, and face rgb (255,255,255) - any ideas would be 
appreciated.
thanks