• Fond animé

    Une question m'a été posée ... à laquelle je ne sais répondre !

    Comment placer une image animée (diapo en gif) en image de fond d'un blog Ekla.

    L'image de fond étant limitée en poids à 400ko, il est difficile de créer un diapo dans ce poids; la solution est sans doute d'intervenir dans le CSS du blog mais je ne sais pas faire.

    Ce que je sais faire est limité à un fond animé sur un article, de ce genre:

    Une question m'est posée: comment placer en fond de blog, une image animée (diapo).
    A ma connaissance, le poids de l'image de fond est limité à 400ko et je ne vois pas comment créer une image animée sous ce poids.

    Par contre, dans un article, nous pouvons créer une animation avec plusieurs images et la placer en fond d'article.
    Par dessus, nous plaçons les éléments de notre article, éléments qui peuvent être du texte, des liens, des images, des vidéos, etc...

    Le nombre d'images animées n'est, dans ce cas, pas limité par Ekla.
    Je sais que ça ne répond pas à la demande qui m'a été faite mais je ne vois pas d'autre solution; je suis preneur si quelqu'un a une idée pour l'image de fond animée du blog entier.

    Dans mes articles, je place une histoire, une image, et un lien vers une page de code pour montage.
    Il me semble que le lien n'est pas suivi par la majorité des visiteurs, qui, souvent, ne commentent que la blague et l'image ... je me trompe ?


    <div style="width: 90vw; height: 50vw; text-align: left;">
    <p style="position: absolute; z-index: 1; width: 92vw; height: 50vw;"><img id="diapo1" src="http://ekladata.com/yhBKICCibARLkNnaAYmd9bkQHfU.jpg" alt="" /> <img id="diapo2" src="http://ekladata.com/lblkRzE6IzaZBIlzPNuIQ4FL44E.jpg" alt="" /> <img id="diapo3" src="http://ekladata.com/vi9FVtlQFV9MB7CRp9m4a7eo1fY.jpg" alt="" /> <img id="diapo4" src="http://ekladata.com/y_Hq0T1kQimeKaCB5ieZJfOtnAw.jpg" alt="" /></p>
    <p style="position: absolute; z-index: 2; width: 80vw; height: auto; background: rgba(255,255,255,0.7); transform: translate(6vw,1vw); text-align: center; font-size: 1.2vw;">Une question m'est pos&eacute;e: comment placer en fond de blog, une image anim&eacute;e (diapo).<br />A ma connaissance, le poids de l'image de fond est limit&eacute; &agrave; 400ko et je ne vois pas comment cr&eacute;er une image anim&eacute;e sous ce poids.</p>
    <p style="position: absolute; z-index: 2; width: 60vw; height: auto; background: rgba(255,255,255,0.7); transform: translate(16vw,12vw); text-align: center; font-size: 1.2vw;">Par contre, dans un article, nous pouvons cr&eacute;er une animation avec plusieurs images et la placer en fond d'article.<br />Par dessus, nous pla&ccedil;ons les &eacute;l&eacute;ments de notre article, &eacute;l&eacute;ments qui peuvent &ecirc;tre du texte, des liens, des images, des vid&eacute;os, etc...</p>
    <p style="position: absolute; z-index: 2; width: 80vw; height: auto; background: rgba(255,255,255,0.7); transform: translate(6vw,25vw); text-align: center; font-size: 1.2vw;">Le nombre d'images anim&eacute;es n'est, dans ce cas, pas limit&eacute; par Ekla.<br />Je sais que &ccedil;a ne r&eacute;pond pas &agrave; la demande qui m'a &eacute;t&eacute; faite mais je ne vois pas d'autre solution; je suis preneur si quelqu'un a une id&eacute;e pour l'image de fond anim&eacute;e du blog entier.</p>
    <p style="position: absolute; z-index: 2; width: 60vw; height: auto; background: rgba(255,255,255,0.7); transform: translate(16vw,37vw); text-align: center; font-size: 1.2vw;">Dans mes articles, je place une histoire, une image, et un lien vers une page de code pour montage.<br />Il me semble que le lien n'est pas suivi par la majorit&eacute; des visiteurs, qui, souvent, ne commentent que la blague et l'image ... je me trompe ?</p>
    </div>
    <style><!--
    #diapo1{animation:dde1 40s linear 0s infinite normal; position:absolute; z-index;1; width:90vw; height:50vw;}
    @-moz-keyframes dde1{
    0% {opacity:1;}
    25% {opacity:1;}
    26% {opacity:0;}
    100% {opacity:0;}}
    @-webkit-keyframes dde1{
    0% {opacity:1;}
    25% {opacity:1;}
    26% {opacity:0;}
    100% {opacity:0;}}
    #diapo2{animation:dde2 40s linear 0s infinite normal; position:absolute; z-index;1; width:90vw; height:50vw;}
    @-moz-keyframes dde2{
    0% {opacity:0;}
    25% {opacity:0;}
    26% {opacity:1;}
    50% {opacity:1;}
    51% {opacity:0;}
    100% {opacity:0;}}
    @-webkit-keyframes dde2{
    0% {opacity:0;}
    25% {opacity:0;}
    26% {opacity:1;}
    50% {opacity:1;}
    51% {opacity:0;}
    100% {opacity:0;}}
    #diapo3{animation:dde3 40s linear 0s infinite normal; position:absolute; z-index;1; width:90vw; height:50vw;}
    @-moz-keyframes dde3{
    0% {opacity:0;}
    50% {opacity:0;}
    51% {opacity:1;}
    75% {opacity:1;}
    76% {opacity:0;}
    100% {opacity:0;}}
    @-webkit-keyframes dde3{
    0% {opacity:0;}
    50% {opacity:0;}
    51% {opacity:1;}
    75% {opacity:1;}
    76% {opacity:0;}
    100% {opacity:0;}}
    #diapo4{animation:dde4 40s linear 0s infinite normal; position:absolute; z-index;1; width:90vw; height:50vw;}
    @-moz-keyframes dde4{
    0% {opacity:0;}
    75% {opacity:0;}
    76% {opacity:1;}
    100% {opacity:1;}}
    @-webkit-keyframes dde4{
    0% {opacity:0;}
    75% {opacity:0;}
    76% {opacity:1;}
    100% {opacity:1;}}
    --></style>