Exercice : Position personnage

Cet exercice se trouve dans le chapitre CSS3 - section Les fonds et fonds multiples. 

Le code HTML contiendra une balise ayant deux styles :

Le premier pour l’image de fond et la taille du masque (id=’perso’) et le second pour la position du personnage (class= ‘position_face_1’).

<div id='perso' class='position_face_1'></div> 

Pour le CSS, l’ID perso récupérera l’image en arrière-plan, qui sera complète avec toutes les positions.

#perso étant un block, il pourra avoir des dimensions. Et ce sont ces dimensions, 95px et 160px, créant une sorte de masque, qui feront qu’une seule position sera affichée à l’écran. Il faudra alors créer autant de styles que le personnage a de positions.

#perso { 
   display: inline-block; 
   background-image: url(personnage.png); 
   width: 95px; 
   height: 160px; 
   /* 1142 / 635 */ 
} 

Remarquons au passage, dans la réponse ci-dessous, le fait que dans un premier temps le second paramètre de background-position est toujours à 0px. Ce qui signifie que Y est égal à zéro et que nous sommes en train de travailler sur la première ligne de l’image, correspondant au personnage de face.

/*  Face */ 
.perso.position_face_1 {    background-position:...