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