need sprite help please
 

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)

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 :)

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.

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.

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.