CODEWITHSUNDEEP
cssimagecss-sprites
DisgruntledGoat
DisgruntledGoat

Reputation: 72560

Is there a recommended amount of spacing between CSS sprites?

Usually if I create CSS sprites, I line them all up next to each other with no spacing at all. For example if all the images are 10x10 pixels I would put them at the coordinates 0,10; 0,20; 10,10; 10,20.

But this seems to cause problems in certain circumstances. For example during page zooming and on mobile you can see the edge of the next sprite along.

Why does this problem occur, is it to do with rounding errors? Is simply adding spacing around the sprites the best way to avoid the problem? If so, is there a minimum or recommended amount of spacing we should have between the icons in the sprite image?

Upvotes: 6

Views: 1029

Answers (2)

Christoph
Christoph

Reputation: 51201

Sprite Bleeding may occur on zoom due to rounding, especially in IE (the old versions simply round to the nearest integer, e.G. a calculated value of 20.343px would be rendered as 20px).
Since the rounding error is never bigger than 1px, with a padding of 1px on all sides you can already fix that problem.

Modern browsers use a method called sub pixel rendering to mitigate this problem.

Upvotes: 4

webextensions.org
webextensions.org

Reputation: 739

It would be easier to maintain CSS sprites stored in 50px x 50px or 100px x 100px boxes.

  • It helps in organizing related images in sprite.
  • You can copy paste a previous style and change just one digit for new style.
  • You would not need to manually find out the perfect pixel position manually.
  • It would also avoid the problematic cases where sometimes, you are not able to control the width/height of an html element and it shows the other unintended portions of the sprite image.

eg:

div.test {
    background-image: url(image.png);
    background-position: 100px 0px;
}
div.test:hover {
    background-position: 100px 100px; /* Simple relation with previous style */
}

div.box1 {
    background-image: url(image.png);
    background-position: 200px 0px;
}
div.box2 {
    background-image: url(image.png);
    background-position: 300px 0px; /* No efforts required to find out perfect pixel position */
}

Upvotes: 0

Related Questions