div background image zoom issue

I have a div with background image which contains 3 colors of the same icon

I shift the icon (background-position: top/center/bottom) according to what page is user viewing:

All works fine utill I zoom the page (ctrl + mousewheel) - than the background image seems to shift one pixel up or something, so i can see one-pixel line of the other icon at the bottom of my wrapper div: 开发者_StackOverflow

Screens are from IE but it looks even more broken on iPad...

Any thoughts about what is causing this and how to fix it?

You can prevent any of the other images inside the sprite from showing by using diagonal sprites, or simply leaving some space between each image.

I shift the icon (background-position: top/center/bottom)

Use should use explicit px offsets instead. I suspect that will be slightly more robust when it comes to zooming.

There's nothing you can really do to prevent things sometimes being "1px off" when you zoom.

For example, if you have a 42px high element, and you zoom to 125%, then you have a 52.5px high element. The browser must round that number one way or the other.

Since those images are bitmaps, they always gonna look bad wen you zoom them.

You can do tree things:

1. Use a library like raphael JS and inlude your icons as vectors: http://raphaeljs.com/
2. Wrap your icons into spans for example and using a PX size and not EM's.
3. Leave more speace between your sprites

Try to make better resolution image and try it again.

It's better practice (and ultimately gives you much better control) to use pixel positioning rather than top/center/bottom when implementing CSS sprites, that way the image you want to show can be slightly larger (or with a little spacing) and therefore support that visual overflow you're seeing when you zoom. Your other images/states won't be affected by the neighbouring image/state because you're setting their position with a pixel-specific location rather than top/center/bottom e.g. (from article link below)

#panel-a {
    background: transparent url(sprite.jpg) 0 -200px no-repeat;
}
#panel-b {
    background: transparent url(sprite.jpg) -96px -200px no-repeat;
}
#panel-c {
    background: transparent url(sprite.jpg) -172px -200px no-repeat;
}
#panel-d {
    background: transparent url(sprite.jpg) -283px -200px no-repeat;
}

Not to mention that pixel positioning allows you to add additional states to your image without affecting other existing states if you add them onto the bottom of your image, for example. Of course that changes when you start adding images horizontally.

Here's a good reference: http://www.alistapart.com/articles/sprites