I'm trying to get the back-ground image of a legacy div (by which I mean it already has a background image, which I cannot control & thus have to initially over-write) to smoothly rotate indefinitely. Here's what I have so far:

var images = [
    "/images/home/19041085158.jpg",
    "/images/home/19041085513.jpg",
    "/images/home/19041085612.jpg"
    ];

var counter = 0;
setInterval(function() {
$(".home_banner").css('backgroundImage', 'url("'+images[counter]+'")');
    counter ++;
    if (counter == colours.length) {
        counter = 0;
    }
}, 2000);

Trouble is, it's not smooth (I'm aiming for something like the innerfade plugin), and it's not indefinite (it only runs once through the array). All help greatfully appreciated :)