Résolu Diaporama en arrière plan

Bonjour, 

Après de longues recherches et des demandes auprès de certains d'entre vous (merci pour votre aide pourquoipas732), je tente ma chance sur le forum. 

Je souhaite réaliser un diaporama en arrière plan de mon blog communautaire. Il serait constitué d'images fixes qui changeraient toutes les 3 secondes. J'ai cherché et j'ai trouvé chez Blogfacile un code qui fonctionne, mais .... il ne marche que pour un seul fond d'article. 

http://le-blog-facile.ek.la/image-de-fond-en-diaporama-p750568

Si vous avez plusieurs articles à la suite, le diaporama de fond est étirée jusqu'à la fin de vos articles. Du coup ma question est simple : est-il possible de faire fonctionner ce code pour la page avec tous mes articles en faisant en sorte que ce fond de diaporama soit fixe (donc que les images ne soient pas étirées) et mes articles déroulant. 

Merci à tous. 

PS : pour vous donner un exemple : voici ce que cela donne : 

http://zemimi.eklablog.com/accueil-c29962602

Le diaporama passe bien, mais les images sont étirées jusqu'en bas des articles. 

Bonjour Killpower,

Je pense qu'en mettant ces codes, ça devrait correspondre à tes attentes :

#background {
height: 1200px; /*hauteur des images*/
overflow: auto;
}

Super Colette95, cela marche quand je le mets au début du script. merci beaucoup. 

Je pense que beaucoup d'utilisateurs pourront maintenant utilisé ce code.. 

....Sauf que voilà, lorsque je veux le mettre sur un autre blog pour lequel le diaporama est prévu à l'origine (celui que je vous ai indiqué et là pour les tests), il ne fonctionne pas. 

http://www.rpgjeuxvideo.com/

Il affiche le fond à 1200px (la hauteur des images) en dessous de mes premiers articles. Toutes les images du diaporama sont affichées à la queuleuleu tout en bas des articles. 

Incroyable... il y a une raison ? 

Merci en tout cas, vous êtes super !

As-tu pensé à modifier les paramètres de ton background dans la personnalisation du thème ?

Bien sur. je te laisse regarder ce que cela donne. Tu scrolles en bas de la page et tu verras toutes mes images de fond à la queuleuleu. C'est à y perdre son latin. 

J'utilise google chrome

 Le menu déroulant du header ne fonctionne plus, certains menus sont donc inutilisable dans le header. 

Jai laissé le script dessus vous verrez ce que cela fait

C'est assez bizarre car cela marche sur certaine page : http://www.rpgjeuxvideo.com/avernum-escape-from-the-pit-a147797044

Peut-être un conflit de codes javascript, car apparemment il y a un également un bug au niveau du formulaire des commentaires générant une kyrielle de codes incroyable dans le html et un décalage de 2 cases <input> qui se retrouvent tout en bas de page.

Le javascript est toujours à utiliser avec précaution car la plateforme en utilise pour le fonctionnement de nos blogs et l'ajout du nôtre peut provoquer parfois des catastrophes. C'est d'ailleurs pour cela qu'il n'est pas activé systématiquement. 

Tes essais sur le blog de démo fonctionnaient car il n'y avait pas tout ce que tu as sur ton blog original.

Désolée donc de ne pouvoir t'aider davantage. 

Merci bien quand même Colette. Cela servira surement pour d'autres qui pourront le faire. 

Bonjour Killpower,

Suite... Ayant installé une bannière sur un de mes blogs fonctionnant de la même façon mais réalisée tout en css, je me suis dit qu'il devait être possible de réaliser la même chose pour un background (d'où suppression du javascript).

Si cela t'intéresse toujours voici les codes à mettre dans un module :

<div class="monbackground">
<div class="image1">&nbsp;</div>
<div class="image2">&nbsp;</div>
<div class="image3">&nbsp;</div>
<div class="image4">&nbsp;</div>
</div>
<style><!--
#background {
height: 1000px;/*hauteur de l'image*/
overflow: auto;
}
#menu1, #menu2, #content, #header, #footer {
opacity: 0.999;
z-index: 1;
} 
.image1, .image2, .image3, .image4 {
position: fixed;
top: 0;
left: 50%;/*pour centrage à partir du milieu du blog*/
margin-left: -720px;/*moitié de la largeur de l'image*/
width: 1440px;/*largeur de l'image*/
height: 100%;
z-index: -1;
}
.image1 {
background: url("url de ton image") no-repeat;
animation: fade 25s ease-in-out infinite;
-webkit-animation: fade 25s ease-in-out infinite;
}
.image2 {
background: url("url de ton image") no-repeat;
animation: fade2 25s ease-in-out infinite;
-webkit-animation: fade2 25s ease-in-out infinite;
}
.image3 {
background: url("url de ton image") no-repeat;
animation: fade3 25s ease-in-out infinite;
-webkit-animation: fade3 25s ease-in-out infinite;
}
.image4 {
background: url("url de ton image") no-repeat;
animation: fade4 25s ease-in-out infinite;
-webkit-animation: fade4 25s ease-in-out infinite;
}
@keyframes fade
{
0% { opacity: 1 }
25% { opacity: 0 }
50% { opacity: 0 }
75% { opacity: 0 }
100% { opacity: 1 }
}
@keyframes fade2
{
0% { opacity: 0 }
25% { opacity: 1 }
50% { opacity: 0 }
75% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes fade3
{
0% { opacity: 0 }
25% { opacity: 0 }
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes fade4
{
0% { opacity: 0 }
25% { opacity: 0 }
50% { opacity: 0 }
75% { opacity: 1 }
100% { opacity: 0 }
}
--></style>

Ce fond a été réalisé avec 4 images (dont les formats sont identiques) pour que tu puisses comprendre le fonctionnement. Si tu souhaites en mettre plus il te faudra suivre la trame. Les valeurs en rouge sont bien évidemment à adapter.

Si tu veux utiliser ces codes, pense à enlever l'image que tu as mise dans les paramètres du fond du blog.

Je mets mon blog test en ligne ici juste le temps que tu puisses voir le résultat avec tes propres codes, mais mes images ne sont pas adaptées aux dimensions de ton blog et non réduites, donc le chargement peut-être un peu long.

Et pour terminer... je n'assure pas le S.A.V   n'en ayant pas le temps, c'était par simple curiosité que je me suis penchée sur le sujet. 

MERCI COLETTE ! C'est SUPER. 

J'imagine bien que cela va servir à d'autres personnes qui pourront faire les mêmes choses. 

Un grand MERCI, VOUS êTES SUPER ! 

Bon, maintenant que tu as vu ce que cela donnait, je vais remettre mon blog test hors ligne et mes neurones au repos. 

Bonne continuation.