[Résolu] Mettre en élément en arrière plan

Bonjour,
j'ais fais une section qui devrait servir d'arrière plan qui bouge en fonction de la postion de la souris pour mon site, seul problème est qu'elle agis comme une section normale et q'elle bloque la superposition des autres éléments.
J'ais fais des recherches et je suis tombé sur la propriété z-index, pour l'utiliser, il faut que ma section soit fixée, je l'ais fais et j'ais mis le z-index a -1. Les autres éléments censés la superposer ne le font pas et le background ne bouge plus en fonction de la souris !

Voici mon code :

<p>test</p>
        <section class="module" id="module"></section>

css:

body{padding: 0;margin: 0;}

section{
    height: 500px; width: 500px;
    background: url(../background.png);
    background-color: #2c2f33;
    overflow: hidden;

    background-attachment: fixed;
    position: fixed;
    z-index: -1;
}

C'est la première fois que je le fais et si sa fonctionne sa rajoutera quelque chose de sympa au site, merci d'avance.


J'ais trouvé une piste ! Mon site référent est celui de YAGPDB, j'ais entendu parler de parralax.js et BINGO, j'ais retrouvé un parramètre de parralax.js dans la code source de https://yagpdb.xyz/ . Je vais maintenant essayer d'y voir plus clair. Modifié par AnderCSS (12 Aug 2020 - 17:29)

J'ais donc trouvé la solution pour ceux que sa interesse, il faut utiliser la librairie js Parallax.js, mettre section en position relative, et ensuite 2 div en position absolute qui seront respectivement, le background parallax et le contenu superposé, le contenu aura un z-index de 1 et le background 0. Les 2 éléments devraient se superposer, ne reste plus qu'a les placer. Cela devrait donner un joli résultat tel que celui du site https://matthew.wagerfield.com/parallax/.

Bonne chance !
Modifié par AnderCSS (15 Aug 2020 - 13:34)