need sprite help please

[Chadi]

I'm trying to optimize the mobile skin for 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/metr...o-icons-24.png

This is the new one I made, 64px:
http://www.talkjesus.com/images/metr...o-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

[Lynne]

Somewhere in your CSS, the height and width are set. The CSS you posted is supposed to tell us where the top left corner is. So, you need to change the height/width CSS and then change all the positions for the upper left corner of the image.

[Chadi]

Lynne,

Thanks but not 100% understanding your response. I posted the entire CSS portion for that sprite image. I posted a link to the original image and the new one I created as well.

[alexNL]

If it needs to be scaled by 50% and you know the fixed width why not simply set the width to 24px?

[Chadi]

Originally Posted by alexNL

If it needs to be scaled by 50% and you know the fixed width why not simply set the width to 24px?

I do not have css/sprite skills, that's why. What should I do and how do I do it?

I want the 64px high quality image I created (sprite) scaled down to 24px. This is what I'm trying to accomplish.