need to fix retina sprite css issue

Question

I'm trying to optimize the mobile skin for www.talkjesus.com to be retina clear.

I accomplished this with standalone images such as the facebook/twitter icons, the logo and the top right 3 icons in the header as well.

Problem I'm having is doing this for the sprite image entirely.

This is the css code (default)

.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%;}

This is the original sprite: http://www.talkjesus.com/images/metro_mobile/blue/mobile/metro-icons-24.png

This is the new one I made, 64px: http://www.talkjesus.com/images/metro_mobile/blue/mobile/metro-icons-64.png

By default the retina style image should be at least 2x larger than the size that will be applied. In this case, it is 24px original but I do not know how to modify the css code to reflect the new dimensions so it pulls the correct icon from the 64px version while still displaying at 24px live.

Thanks for your help

Answer 1

I created a newly sprite generator for this kind of purpose, unlike the others out there, you can create a regular sprite with retina images, in the end you can check an option in the preference telling it is for retina and you will get both regular and retina sprites when you download it.

and also get the generated css for it

CssSpriteGenerator.net

Answer 2

You can check the below tool to generate the CSS from the sprite that you have created

spritecss.com