Les "sprites responsives"

Bonjour ou bonsoir à tous,

Ça fait 2 jours que je me creuse la tête sur ce problème et je ne trouve malheureusement pas de réponse.

Bien alors je suis en train de créer un site web responsive et je n'ai pas trop de problème avec ça mais en construisant mon menu qui contiendra une image avec sa description en dessous en forme de lien,je me suis retrouvé coincé.
Pour le positionnement,aucun problème,je retrouve bien mon bouton de menu (qui contiendra une image) et le nom au dessous et je peux naviguer sur mon site sans problème en cliquant sur le bouton.Voici le code html:

<nav>
<a href="#"><figure class="lien 1"></figure>lien 1</a>
<a href="#"><figure class="lien 2"></figure>lien 2</a>
<a href="#"><figure class="lien 3"></figure>lien 3</a>
<a href="#"><figure class="lien 4"></figure>lien 4</a>
<a href="#"><figure class="lien 5"></figure>lien 5</a>
</nav>

Et voici le css:

nav{
width: 72.91666666666667%;
height:110px;
margin-left: auto;
margin-right: auto;
background-color: #924849;
text-align:center;
}

nav a{
width: 11.42857142857143%;
height: 90.90909090909091%;
margin-left: 7.142857142857143%;
display: block;
background-color: #E0FF00;
float: left;
}

nav figure{
width: 100%;
height: 80%;
margin: 0;
background-image: url(../img/image_nav.jpg);
background-repeat: no-repeat;
background-position: left top;
}

Sur Photoshop,je me suis créer un sprite pour alléger un maximum mon code html et je me sers de ce sprite pour définir l'image qui sera sur mes boutons en les positionnant selon les classes que je leur ai donné.Voici ce code:


nav .lien_2{
background-position: -80px top;
}
nav .lien_3{
background-position: -160px top;
}
nav .lien_4{
background-position: -240px top;
}
nav .lien_5{
background-position: -320px top;
}

Je n'ai pas mis de background-size puisque mon sprite fait 400*240px et que mes boutons font 80*80px et en sachant aussi que j'ai un code pour l'hover et pour l'active qui automatiquement,font la même chose.

J'en viens enfin à mon problème.
Quand je lance mon site dans mon navigateur et en plein écran,pas de problème,mes images sont bien là à leur place mais quand je diminue la largeur de mon navigateur,les images ne suivent pas et restent figées.Ce qui fait que même si je réduit le navigateur de quelques pixels,les images se retrouvent coupées car mes bloc suivent la diminution mais pas l'image.
Je ne sais pas si j'ai été assez clair mais si je ne le suis pas,dîtes le moi et je serais plus précis car c'est important pour moi.

Merci d'avance pour votre aide.