besoin de réparer rétine sprite css question

Question

J'essaie d'optimiser la peau mobile pour www.talkjesus.com être rétine claire. J'ai accompli cela avec des images autonomes telles que les icônes facebook/twitter, le logo et les 3 icônes en haut à droite dans l'en-tête.

Problème Je suis en train de faire cela pour l'image du sprite entièrement.

C'est le code CSS (par défaut)

.ui-icon, .ui-icon-searchfield:after { 
background-image: url({vb:stylevar imgdir_mobile}/metro-icons-24.png); 
border-radius: 0; 
background-color: transparent; 
} 
.ui-icon-plus {background-position:-0 50%} 
.ui-icon-minus {background-position:-28px 50%} 
.ui-icon-delete {background-position:-56px 50%} 
.ui-icon-arrow-r {background-position:-84px 50%} 
.ui-icon-arrow-l {background-position:-112px 50%} 
.ui-icon-arrow-u {background-position:-140px 50%} 
.ui-icon-arrow-d {background-position:-168px 50%} 
.ui-icon-check {background-position:-196px 50%} 
.ui-icon-gear {background-position:-224px 50%} 
.ui-icon-refresh {background-position:-252px 50%} 
.ui-icon-forward {background-position:-280px 50%} 
.ui-icon-back {background-position:-308px 50%} 
.ui-icon-grid {background-position:-336px 50%} 
.ui-icon-star {background-position:-364px 50%} 
.ui-icon-alert {background-position:-392px 50%} 
.ui-icon-info {background-position:-420px 50%} 
.ui-icon-home {background-position:-448px 50%} 
.ui-icon-search,.ui-icon-searchfield:after {background-position:-476px 50%} 
.ui-icon-checkbox-off {background-position:-554px 50%} 
.ui-icon-checkbox-on {background-position: -530px 50%;} 
.ui-icon-radio-on {background-position: -577px 50%;} 
.ui-icon-radio-off {background-position: -601px 50%;} 

Ceci est le sprite d'origine: http://www.talkjesus.com/images/metro_mobile/blue/mobile/metro-icons-24.png

C'est la nouvelle que je fait, 64px: http://www.talkjesus.com/images/metro_mobile/blue/mobile/metro-icons-64.png

Par défaut, le image de style rétine doit être au moins 2x plus grande que la taille qui sera appliquée. Dans ce cas, il est original 24px mais je ne sais pas comment modifier le code CSS pour refléter les nouvelles dimensions afin qu'il tire l'icône correcte de la version 64px tout en affichant toujours à 24px live.

Merci pour votre aide

Answer 1

J'ai créé un générateur nouveau sprite pour ce genre de but, à la différence des autres là-bas, vous pouvez créer une image-objet régulier avec les images de la rétine, à la fin vous pouvez cocher une option dans la préférence disant qu'il est pour la rétine et vous obtiendrez à la fois les sprites réguliers et retina lorsque vous le téléchargez.

et aussi obtenir le code CSS généré pour elle

CssSpriteGenerator.net

Answer 2

Vous pouvez vérifier l'outil ci-dessous pour générer le CSS du sprite que vous avez créé

spritecss.com