[jQuery] fading images

[InLife]

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;
}