Javascript-форум - Плавное изменение бэкграунда

Помогите пожалуйста, с синтаксисом JS знаком поверхностно.
пример http://www.thegomezfirm.com/
в примере это реализовано слайдером. Впихнуть слайдер в свой шаблон не получается.
Код примерно такой HTML

<div class="bg">
<p>info</p>
</div>

CSS:
.bg {
background-image: url (/img/bg3.jpg);
}

если

var images = ['/img/bg1.jpg', '/img/bg2.jpg', '/img/bg3.jpg'];
	var i = 0;
setInterval(function(){
            $('.bg').animate({opacity: 0}, 1000, function() {
                if (i >= images.length) {
                    i=0;
                }
                $('.bg').css('backgroundImage','url(' + images[i++] +') ').animate({opacity: 1},1000);
            });
        }, 8000);
        </script>

то пропадает "info"

Как сделать что бы была плавная смена бэкграунда, а "info" оставалось нетронутым ?

т.е. как понимаю надо

.animate({opacity: 1},1000);

использовать в отношении не всего класса .bg а только к свойству 'backgroundImage'
а как это написать не знаю.
Либо другим способом.