Transition de background

Bonjour,
Je suis en train de réaliser un petit slider de fond pour l'index d'un site, mais j'ai un petit soucis au niveau de la transition, malgré le fondu, il y a toujours un "saut" lors du changement d'image.

L'exemple est ici: http://9087.rez-gif.supelec.fr/refonte/index.php

Voici le code jQuery en question:

    var rand = Math.floor((Math.random() * 4) + 1);
        $('#slider').fadeTo('slow', 0.3, function()
    {
        $(this).css('background-image', 'url("http://9087.rez-gif.supelec.fr/refonte/images/slider/slide'+rand+'.png")');
    }).delay(1000).fadeTo('slow', 1000);

    function ChangeImage() {

    var rand = Math.floor((Math.random() * 4) + 1);
        $('#slider').fadeTo('slow', 0.3, function()
    {
        $('#slider').css('opacity', '0');
        $(this).css('background-image', 'url("http://9087.rez-gif.supelec.fr/refonte/images/slider/slide'+rand+'.png")');
        $(this).css('opacity', '1');
    }).fadeTo('slow', 1000);

    };

    setInterval(ChangeImage, 9000);

et le css

.slider {
    display: block;
    width: 100%;
    height: 490px;
    background-position: center;
    background-repeat: none;
    transition: opacity 1s linear;
    transition: background 1s linear;
    border-bottom: 4px solid #1ABC9C;
    border-top: 2px solid #1ABC9C;
}

Quelqu'un pourrait-il me donner un petit coup de pouce pour render cette transition plus agréable à regarder ?

Merci d'avance,
Djokx.