Aide sprites css

Bonsoir à tous,
je viens solliciter votre aide pour mon site.
je souhaiterai regrouper quelques images de mon footer en un sprite
voici ce que j'ai dans mon blockfooter.php
<ul>
<li><a title="Facebook" href="#"><img src{static_block_url}mg/cms/facebook.png" alt="face" /></a></li>
<li><a title=Twitter" href="#"><img src="{static_block_url}img/cms/twitter.png" alt="tw" /></a></li>
<li><a title="Google+" href="#"><img src="{static_block_url}img/cms/g+.png" alt="g+" /></a></li>
<li><a title="Pinterest" href="#"><img src="{static_block_url}img/cms/pinterest.png" alt="pin" /></a></li>
<li><a title="Instagram" href="#"><img src="{static_block_url}mg/cms/instagram.png" alt="Inst" /></a></li>
</ul>

j'ai regroupé ces image dans une seule image (footer-sprite.png)en notant les informations nécessaire à mon fichier css (position de chaque image, width etc..)

Quelles sont les modifications que je dois apporter à mon fichier blockfooter.php et mon fichier css.

En vous remerciant
Modifié par sami24 (31 May 2014 - 21:14)

Hello !

Si tu veux opter pour la solution des sprites, tu n'utiliseras plus de balise image mais en css la propriété background en définissant le même background-image pour tous tes éléments et un background-position spécifique pour chaque icône sur tes liens par exemple en les identifiants avec des classes en css.

Ça tombe plutôt bien car il y a un tuto sur Alsacréations qui traite ce sujet :
http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html