Why CSS Background position changes on sprite height change?

Question

Something interesting happens in my website. It is in active development and I keep adding and adding stuff to the website's sprite PNG file. Sometimes I add so many icons and blocks that I NEED to change the height of the image, but when I do this, some (NOT ALL!) elements appear on different locations.

For example I have a PNG image with size 900x900 pixels. I mapped the CSS styles to the proper coordinates, they I added 200 pixels of transparent space at the bottom of the image and some styles report different positions :< breaking stuff around the website. So each time I increase the sprite file, I have to open various CSS files and add X pixels (the amount of height I've added). I even added a 1px baseline on the top of the sprite so that I would be certain that I am not changing any positions but just the height.

I read the specification even in the RFCs and the coordinate system start is at x=0,y=0 which is the top left corner of the image. It doesn't make sense to me :(

UPDATE: Some of the containers that give me bugs are made with positive coordinates rather than negative. I still can't explain it to myself, why stuff like that happens.

UPDATE: So the sprite is located at this URL http://lucho.hoolwars.com/img/sprites.png

and here are few styles that change coordinates if the height of the sprite changes

.job-summary {
width: 330px;
height: 45px;
background: transparent url(/img/sprites.png) -15px 435px;
cursor: default;
}

.popup-title {
background: url('../img/sprites.png') -425px -1077px transparent;
width: 275px;
color: black;
font-weight: normal;
}

.popup-close {
position: absolute;
background: url('../img/sprites.png') -771px -972px transparent;
right: -9px;
top: -22px;
width: 38px;
height: 38px;
z-index: 2;
cursor: pointer;
}

Each time I change the height of "sprites.png" those coordinates are no longer valid :|

Answer 1

I think I know whats going on. Hard to explain - but I'll give it a shot.

I believe you have configured some of your sprite images based on the repeating background, because you are not using no-repeat. Every time you add more images to the sprite any icons that were configured on a repeated image will shift.

You will need to:

1) Add no-repeat to your background (any icons that were using a repeated image will probably now be blank)

2) Reconfigure all your classes to use negative values (always use negative values for your image sprites)

I would suggest you setup your sprites similar to this:

CSS

.sprite-map {
  background: url(sprites.png) no-repeat;
}

.job-summary {
  background-position: -80px 0;
  width: 100px;
  height: 80px;
}

.popup-title {
  background-position: -15px -100px;
  width: 200px;
  height: 100px;
}

.popup-close {
  background-position: -15px -472px;
  width: 50px;
  height: 50px;
}

HTML

<div class="job-summary sprite-map"></div>
<div class="popup-title sprite-map"></div>
<div class="popup-close sprite-map"></div>

That way you only need to specify the URL to the sprite once. Now when you add images to the bottom or the right of the sprite - nothing else will be affected.

Also if you're familiar with Sass - Compass makes image sprites incredibly easy. It might be worth taking a look at if you're interested: http://compass-style.org/help/tutorials/spriting/

Hope this helps!