css background-image cross fade

Question

I am working on a site that is using the nivo-slider plugin. The images in the slider cross-fade fine, but I want to add a background-image repeating pattern and also have that cross fade to another image pattern. I am restricted in that I have not been able to figure out how to add these background images as html without breaking the plugin so I am using the background-image property in css to change the background but it doesn't fade, the new background will just appear. Using css transitions does not work on css background-image and it doesn't work when I use jquery .animate or jquery fades. The closest I've come is fading out and then in, but this is not the cross-fade that I want. I haven't been able to find any javascript plugins to do it either.

So basically my question is: does anyone know how to cross-fade when changing an elements css background-image property?

Answer 1

I suggest two layers.

1. Nivo Slider
2. Adjacent "helper" div

We're only going to create the illusion of a crossfade.

Step one: Layer 1 (nivo slider) fades the new background in. After it's done fading it, the background is moved to Layer 2 and removed from layer 1. The user won't see the switch as it's instantaneous.

Step two: On the next transition, fade layer 2 out while layer 1 is fading in with the new background. Once this is done, switch the background from layer 1 to layer 2, turn layer 2 to opacity 100% and remove the background from layer 1. Again, the client-side will not see the visually switch as the appearance will look the same to them.

Rinse and Repeat.