0

For an application with a good lot of icons, I want to make an image sprite. Since I started my 'adventure' in the land of webdesign/ front-end webdev, I've always wondered: what is the logic behind background-position: (left)<number>px (top)<number>px;

When you compare this to the shorthand property for either padding or margin(when only specifying top and left), these are both property: (top)<number>px (left)<number>px; So top and left values are reversed.

Also, suppose I have a sprite that is 64px (length) x 16px (height) and contains a total of 4 16x16 icons. To get the second icon in the sprite (|____|_this_|___|____|), you have to type background-image: -16px 0px; instead of 16px 0px (which would be logical, because the second icon starts 16px later than the first one).

If you want an example (I know w3schools is not always correct but it will do for the example): http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav

So my question is: Why are all the values for the background-position property like,... reversed? Is there any logic behind it? Does CSS read the property from right to left?

webketje
  • 10,376
  • 3
  • 25
  • 54
  • 2
    because you're shifting them backward horizontally or vertically, if you want to use positive values re-arrange your icons so that the first icon you want to use is on the most bottom or most right, this way thenext icon will have a positive shifting value.. – Mi-Creativity May 07 '13 at 12:11
  • @JEES Yes, but why does this property shift backward and not forward, just like all other CSS props? Is there a logic? – webketje May 07 '13 at 12:14
  • 1
    An aside, I thought that when using padding/margin shorthand with only two values, they don't mean `top` and `left` but `top and bottom` and `left and right`. – pevinkinel May 07 '13 at 12:15
  • even for other CSS properties, let's suppose you want to move some div or an image which is inside another div and its origin was on 0,0 .. you have you set a negative value in order to shift it. – Mi-Creativity May 07 '13 at 12:17
  • @JEES Yes! Thank you, I get it now. I focused too much on the sliding of the icon position in the sprite, as opposed to the sprite as a whole. +1 – webketje May 07 '13 at 12:23
  • @Tyblitz , check this [Fiddle](http://jsfiddle.net/mHnvj/) , and try to set a negative value `margin-left: -30px` for the inner div and see how it will work – Mi-Creativity May 07 '13 at 12:24
  • @Tyblitz well, I'm not sure I get you, in your example you do have a 50px margin at the top _and_ the bottom. [fiddle.](http://jsbin.com/icilax/4/edit) – pevinkinel May 07 '13 at 12:30
  • @wilks Ok, I get you! Of course... I thought you meant like this: `margin: `, but you actually meant `margin: ` – webketje May 07 '13 at 12:35
  • @Tyblitz cool, and I could have been a lot clearer by using brackets like you did :) – pevinkinel May 07 '13 at 13:31

1 Answers1

1

When using shorthand for margin (or padding) with only two values you are not setting a X/Y position - you are setting four margins, using the same value for top & bottom (vertical margins), as well as right & left (horizontal margins). You can also pass four values and they will start with margin-top and continue clockwise around the box (top -> right -> bottom -> left).

I usually remember this using the word "trouble" without any vowels (TRBL).

Anyway: for positioning there is only two values, and it is common practice to use the vertical axis (x-axis, 0 is top) and then then horizontal (y-axis, 0 is left), so using a negative value for the y-axis on background-position would move a background the same direction you would move the box if you were to give it a negative left margin.

.class1 {
    background-position: -20px 0; // move background 20px left
    margin-left: -20px; // move box 20px left (margin, following items will also move)
}

.class2 {
    position: relative;
    left: -20px; // move box 20px left (position, following items will stay put)
}

So I guess what I'm trying to say is that the values are basically coherent, depending on how you look at it ;)

Docs for margin (check the syntax list)

xec
  • 17,349
  • 3
  • 46
  • 54