[RÉSOLU] Problème avec le plugin jQuery "Scrolling Parallax"

Bonjour à tous,

Je suis en train de refaire le design de mon blog et aimerais intégrer le génial plugin jQuery "Scrolling Parallax" de Jon Raasch (disponible ici), qui permet d'ajouter de la profondeur en jouant sur différents calques qui ne défilent pas à la même vitesse lorsque l'on scrolle une page.

Le plugin en question permet d'intégrer une image en background et de la faire défiler différemment du corps du texte. Un exemple concret est sans doute plus parlant.

Le problème quand je souhaite l'intégrer à mon design, c'est que l'image vient recouvrir certains éléments de ma page (comme la balise <h1>, certaines <div> et des <img> tout en bas) comme vous pouvez le voir ici. Comment faire pour que l'image en background soit belle et bien en background avec ce plugin, tout en ajoutant cet effet de profondeur que je souhaite avoir... La doc du plugin est très lacunaire...

Voici le javascript ajouté.

$(function() {
    
    $('#ufo').scrollingParallax({
        staticSpeed : .18,
        loopIt : false,
        reverseDirection : false,
        appendInFront : true
    });
    
    $.scrollingParallax('bodybg.jpg', {
        bgHeight : 1200,
        bgWidth : 1920,
        staticSpeed : .40
    });
    
});

Merci de votre aide
Modifié par Viv. (09 Nov 2010 - 21:34)

Problème finalement résolu ; il suffisait tout simplement de changer le zIndex du javascript du plugin du 0 à -1 :

function appendBackground( theSrc ) {
            var bgCss = {
                display:   'block',
                top:       0,
                left:      0,
                width:     options.bgWidth,
                height:    options.bgHeight,
                // Image de fond derrière tous les éléments
                zIndex:    -1
            };

Modifié par Viv. (09 Nov 2010 - 21:39)