Diapo 2 avec gif

Diapo 2 avec gif

Je reviens sur ce montage pour trouver le moyen de placer, en fond d'un bloc input (au clic), la vidéo en gif sur un fond coloré.

Après recherche sur le net, on peut placer plusieurs images en fond, en positionnant chacune d'elles.

Dans mon cas, le fond texturé est en fond et l'image animée dessus et centrée verticalement.

Pour ceux qui voudraient essayer ce réglage, en lignes de code CSS, il faut écrire d'abord l'adresse (ou les) de l'élément animée et à la fin, l'image de fond.

Avancement au clic.

Images en 800x600px et images animées en 800x450px; leur nombre est selon votre convenance.

Le positionnement en profondeur (z-index:): au départ, la première image (z-index:10;) est au premier plan pour être "cliquable", les autres (z-index:1;) étant dessous et passant au premier plan (z-index:20;) au clic, pour être affichées et cliquables.

En bleu, les adresses des images fixes; en vert, les adresses des images animées et en rouge, l'adresse du fond texturé.

Vous remarquerez l'écriture pour des fonds multiples: background:url() les adresses dans l'ordre, séparées par une virgule, avec celle du fond en dernier; background-position: le positionnement de chacune, dans l'ordre, séparés par une virgule.

<div id="gf"><input id="gf1" type="text" /><input id="gf2" type="text" /><input id="gf3" type="text" /><input id="gf4" type="text" /><input id="gf5" type="text" /><input id="gf6" type="text" /><input id="gf7" type="text" /><input id="gf8" type="text" />
</div>
<style></style>