bien sûr il y a la méthode simple, que tout le monde connait :

Code:

<img src="http://liendugif" width="largeur" />

Mais pour choisir soi-même la hauteur et la largeur de son image il faudra chercher un peu plus loin. Un p'tit exemple ?

Code:

<div style="background-image:url(http://25.media.tumblr.com/065b001d344aa2f6ca09343055e1160a/tumblr_mwkic9Nkl71s6vjiio1_500.gif);width:450px; height: 250px; background-size:450px auto; background-position:50% 65%;"> </div>

Tiens, ce truc te rappelle quelque chose non ? Normal, c'est un bout du code de la fiche de présentation : tu le trouveras au niveau du gif qui se rétracte vers la gauche pour révéler les info de base du personnage. Comme tu le vois, il est personnalisable ; il n'y a donc plus qu'à réussir à décortiquer ce charabia pour en faire ce que tu veux. Bien sûr, entre les parenthèses du background-image: url(), tu places le lien de ton gif ; quant au width, il définit la largeur de l'image affichée (à ne pas modifier), tandis que le height concerne sa hauteur (à ne pas toucher non plus).

Si tu t'arrêtes là ça va, ton image s'affiche... mais elle est probablement coupée d'une manière qui ne te plait pas non ?

Spoiler:

Tu voudrais peut-être que le background soit plus petit, que la phrase ne soit pas coupée en plein milieu, etc etc. C'est là qu'intervient la propriété background-size. Elle te permet de modifier la largeur de ton image de fond sans avoir besoin de courir sortir ton logiciel de retouche (surtout que si t'as paint, magouiller un gif est plutôt mission impossible n'est-ce pas). La valeur choisie pour le gif de la présentation est celle-ci : background-size: 450px auto; "450px" : la largeur. "auto" : la hauteur. Si tu choisis de fixer la largeur, la valeur "auto" t'évitera de déformer ton gif ou de partir dans des calculs pour trouver la taille proportionnelle à ton changement de hauteur. Ce qui te donne :

Spoiler:

Tu peux aussi inverser en utilisant le "auto" pour la largeur et en fixant une largeur de ton choix. Pour le coup, on utilisera la même que le "height" dont on a parlé plus haut, qui détermine la zone d'image affichée. Ce qui donnera : background-size: auto 250px; Avec le gif de la présa/démonstration, il vaut mieux opter pour la première possibilité, tu te demandes pourquoi ?

Spoiler:

En utilisant la duxième, le gif n'est plus assez large, il se répète. D'autres gif, par contre, ne seront pas assez haut si on diminue leur largeur, si bien qu'il sera préférable de fixer leur hauteur pour être sûrs qu'elle soit la bonne.

C'est bien mignon mais... ce serait encore mieux si le background était centrée non ? Eh bien fais-toi plaisir coco, le background-position est là pour ça. Là encore, deux valeurs à choisir : la position horizontale (right, center, left) et la position verticale (top, center ou bottom). Si ça ne te semble pas assez précis, tu peux aussi utiliser des poucentages comme dans l'exemple utilisé ici : background-position:50% 65%. Résultat :

Spoiler:

Elle est pas belle la vie ?