TalkJesus.com assistance with CSS / Sprite

HTML & CSS
1

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/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 :slight_smile:

2

At the moment it looks like you are using individual, inline images? That makes it easier. Just set the width and height to the desired dimensions in the CSS.

It’s harder to do this with background images. The only way is to create a container set to the width and height you want, and then use the background-size property. This only works in modern browsers, though.

3
Off Topic:

What is “retina clear”?

4

Some devices now have “retina” screens (e.g. iPhone, iPad), which are much higher resolution than regular desktop screens. Thus, most images look a bit blurry and pixelated on these nice screens. So are lot of people are trying to find ways to make images crisper on these devices. One method is to make the image twice the required dimensions and then squeeze it down to the desired size, making it much sharper on screen.

5

Thanks, Ralph. That’s what I thought, but I had not read the expression “retina clear” before and wasn’t positive.

6

Let’s just say it’s “non standard”. :smiley: I think the point is that the images need to be crisp and clear on retina devices.

7

Thanks. No, I’m not using inline images. I gave you the link to the sprite of the original background image used.

I do not know how to modify the CSS correctly to represent the new positioning of the larger, 64px sprite I made and reduce it down to 24px in the css code. This is where I’m stuck.

8

The example I looked at was using an inline image—the gray arrow one in the middle. Perhaps clarify which images you are talking about, as there are lots on the page.

9

Ralph,

The concern/focus here is the sprite links I posted. Not anything else. There’s the original 24px sprite and there’s my 64px version. I want to use the 64px (reduced down to 24px in the CSS code) for retina quality purpose. The 64px will replace the 24px sprite image file.

Where I’m confused is how to properly modify the CSS code to adjust the ‘positions’ of the icons in the 64px sprite.

Hope that’s clear enough.

10

Well, the problem is that you haven’t presented a practical example of this, because CSS and an image on their own are not enough. To give a specific answer that relates to your site, we need to see the HTML you are working with, as that’s critical. Anyhow, I’ll attempt a general answer.

Your only hope in this situation is to use a bit of CSS3, though that won’t work in older browsers, so beware. Your original CSS does the usual things of positioning the sprite as a background image on an HTML element. The difficulty now is that you want to scale the background image, which you can do with the CSS3 background-size property.

So, if you say had a div of width 24 x 24px, you would set the background image as usual, along with background position, but use background-size to resize the image to suit. Here’s a simple example with the image you provided:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {
	width: 24px; 
	height: 24px;
}

div.one {
	background-image: url(http://www.talkjesus.com/images/metro_mobile/blue/mobile/metro-icons-64.png);
	background-position: 0 0;
	background-size: auto 24px;
}

div.two {
	background-image: url(http://www.talkjesus.com/images/metro_mobile/blue/mobile/metro-icons-64.png);
	background-position: -24px 0;
	background-size: auto 24px;
}

</style>
</head>
<body>

<div class="one"></div>

<div class="two"></div>
			
</body>
</html>

If you want this to work on older browsers, you’ll perhaps need to serve up code like this in a media query, with fallback code for older browsers using the smaller image.

Hope that helps. :slight_smile:

11

Thanks Ralph. I fixed it by simply reducing the 64px to 48px (double the original) and simply adding background-size: auto 24px to the CSS.

Thanks again!