CSS sprite - showing part of another image when zo

Question

I have following CSS sprite. When I try to display the first icon, it works fine, but when I set zoom to 150%, I see also small part of the second icon. This problem is on Google Chrome and Internet Explorer, but not on Mozilla Firefox:

JSfiddle

div {
    width: 29px;
    height: 29px;
    background-image: url(http://i.imgur.com/O2Cp0nb.png);
}

<div></div>

That's how it looks for me on 150% zoom:

Update: Chris suggested that I need to put some space between icons. So my question is: why? And why it works fine on Mozilla Firefox even without that space?

Answer 1

The problem seems to be image interpolation or image size rounding errors.

Maybe try this:

background-size: 101%;

It's werid but works in IE 11.

Answer 2

Different browsers may use different algorithms for rounding numbers and rendering images in certain cases. You could read some articles about it, for example — this and this.

So, when your zoom is 150% and you have 29x29px image, your browser is need to render 43.5x43.5px image. How each version of each browser will round it? We don't know, maybe 43x43px, maybe 44x44px. There is article about sprites and zoom.

I create new code snippet with two pairs of images. The first pair uses your image sprite and the second — my. I increased the Facebook image size from 29x29px to 30x30px. Try to zoom it. You can see they have problems on different zoom ratio (the first — on 150%, the second — on 110%—125%).

JSFiddle

.fb29 {
    width: 29px;
    height: 29px;
    background: url(http://i.imgur.com/O2Cp0nb.png) no-repeat;
    background-size: 29px;
}

.sun29 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/O2Cp0nb.png) 0 -29px no-repeat;
    background-size: 29px;
}

.fb30 {
    margin-top: 10px;
    width: 30px;
    height: 30px;
    background: url(http://i.imgur.com/mRIPLXO.png) no-repeat;
    background-size: 30px;
}

.sun30 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/mRIPLXO.png) 0 -30px no-repeat;
    background-size: 30px;
}

<div class="fb29"></div>
<div class="sun29"></div>

<div class="fb30"></div>
<div class="sun30"></div>

So, my advice is to add 1px between images to be independent from different browsers rounding algorithms and browsers bugs:

JSFiddle

.fb29 {
    width: 29px;
    height: 29px;
    background: url(http://i.imgur.com/dKxYwhZ.png) no-repeat;
    background-size: 29px;
}

.sun29 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/dKxYwhZ.png) 0 -30px no-repeat;
    background-size: 29px;
}

.fb30 {
    margin-top: 10px;
    width: 30px;
    height: 30px;
    background: url(http://i.imgur.com/1fJyJVK.png) no-repeat;
    background-size: 30px;
}

.sun30 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/1fJyJVK.png) 0 -31px no-repeat;
    background-size: 30px;
}

<div class="fb29"></div>
<div class="sun29"></div>

<div class="fb30"></div>
<div class="sun30"></div>

If you need to support old IE browsers, look into this article.

Now you could use some useful things on gulp/grunt to automatically generate sprites where you can set gap/margin between images. See this.

Answer 3

When I try to display the first icon, it works fine, but when I set zoom to 150%, I see also small part of the second icon.

Since you have a size defined for the container, use background-size: cover; should correct the zooming issue for you. The will image "cover" the entire width or height of the container.

Answer 4

It looks like you're using css pixels to crop a piece of a larger image. This is what i see looking at your image url.

How about using a url with the facebook icon alone set to 29x29 like this facebook icon example?

You can also crop the facebook icon you have and set it to 29x29 with an image editor. I did it for you using Adobe Photoshop

Hope this helps