I'm trying to get the background 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 fade between new images 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 == images.length) {
     counter = 0;
 }
}, 2000);

Trouble is, it's not smooth (I'm aiming for something like the innerfade plugin).

EDIT: question originally said "and it's not indefinite (it only runs once through the array).", but Mario corrected my stupid naming error.

EDIT2: I'm now using Reigel's answer (see below), which works perfectly, but I still can't find any way to fade between the images smoothly.

All help greatfully appreciated :)