Animating Background Image

Question

I Like using Jquery and its companion Jquery Ui but can not find a way to animate background image over a certain period of time like 5 seconds. I can not do something like:

$('sampleelement').animate({'background-image':'url(hello.jpg)'},5000);

Any ideas??

Answer 1

This is not possible like this. Css does not allow for backgound image manipulation like this. You should put in a div with the background behind your content and fade that in:

<div id='background_img' style='display:none; position:absolute;'><!-- position me behind the content!--><img ... /></div> 
<div id='content'>YDADA</div>

$('#background_img').fadeIn(5000);

Answer 2

Why don't you use an animated GIF?

Answer 3

Pim Jager's approach is about the closest you will get without an animated gif.

Answer 4

You could create multiple images and just replace one with another using setTimeout. It's kind of like emulating .gif, just gives more flexibility and quality.

Answer 5

Use the jQuery Background-Position Animations plugin. See the demo.

Answer 6

What I did on Cheer Us Up is used basic javascript to change the background image --

$(function(){
curr = 0;
setTimout(changeBg(),200); 

});

function changeBg() {
curr++;

document.body.style.backgroundPosition = curr + 20;

}

That is the basic idea. I didn't use jquery because I just wanted it to slowly slide by.