[jQuery] fading images

Hi all,
I am trying to create a fading image swap for my body's background,
using jQuery.
Since I could not find out how to just fade a backgroundImage
(especially) on the body tag in the CSS, I created a #background tag
in my CSS looking like this:
#background {
    width: 100%;
    min-height: 100%;
    height:auto !important;
    height:100%;
    background-image:url(../img/bgs/lightBlue.jpg);
    background-repeat: repeat;
}
The whole background div wraps around all other divs,
so when fading the background div, my page is lost. Which is not an
option.
So I tried creating a Class for the background div called .bg_image
losing the two background-* lines from the #background style.
The class lookes like this:
.bg_image {
    background-image:url(../img/bgs/lightBlue.jpg);
    background-repeat: repeat;
}
However fading only the class with jQuery will also end up in fading
the whole div.
again causing my page to get lost..
Since I am new at jQuery, can anyone help me out with the fading of
only a background image.
Is this in anyway possible, or do I have to write my own code.
My full stylesheet by the way looks like this:
@charset "utf-8";
/* CSS Document */
body,html,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    height:100%;
    margin: 0;
    padding: 0;
}
body {
    background-color: #CCCCCC;
    background-image:url(../img/bgs/curlyGrey.jpg);
    background-repeat: repeat;
    text-align: center;
}
#background {
    width: 100%;
    min-height: 100%;
    height:auto !important;
    height:100%;
    background-image:url(../img/bgs/lightBlue.jpg);
    background-repeat: repeat;
}
#distance {
    width:1000px;
    height:50%;
    margin-bottom:-300px; /* half of container's height */
    overflow: hidden;
}
#mainMovie {
    position: relative;
    top: 0px;
    left: 0px;
    height:600px;
    width:1000px;
}