Does it matter?

When using background-position in CSS, does it matter what you declare first e.g:


body
{
background-position: top left;
}

compared to

body
{
background-position: left top;
}

Which is more valid? thanks in advance

 

Strictly speaking the first value should be the x value, the second the y.

 

PSD is right, although I suppose with values such as top and left, they could not be interpreted any other way. With numbers, the first is always x and the second always y.

As a side note, keep in mind that while "center" is the default if you only specify the other value (like, if you want left center, you should just be able to say "left"), IE needs that second value explicitly.

 

Ok cool, thanks

 

not necessarily... while x y is how the numerics on images are handled, remember that for some other css properties the order is top right bottom left - you omit the last two and you are declaring y x, not x y.

and by the specification it really doesn't matter one way or the other, since <length> is a different parameter.

To quote the spec:
http://www.w3.org/TR/CSS21/colors.html#propdef-background-position

[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit

Both are valid.

The real reason you see y stated before the x is tradition because for some reason, W3Schools lists them that way. (not bothering to explain they can work x-y or why they only list it that way)