CSS Background Shorthand
Posted on: 03.30.2006
What is the absolute correct way to write out CSS “background” shorthand? I can’t seem to find a definitive answer to this question.
Most examples that I’ve seen
I just don’t understand where people got this format from. I googled around for a few hours and couldn’t find anything that says this is the order.
This is what’s wrong
The order for repeat, position, and attachment is not correct and causes issues in older/picky browsers. The really big error, and the one that EVERYONE seems to do wrong, is the background position axis. The correct ,and much more logical, way to write out background-position is “x y” (left top) and NOT “y x” (top left) like the above examples. Now, to be fair, “top left” is still valid and renders OK in most browsers. But as soon as you start using lengths you will quickly see that the way all browsers try to interpret this is “x y”, not “y x”. So, it makes more sense to just always write it out as “left top” instead of “top left”, right?
The correct way?
For years I’ve used TopStyle for all of my CSS needs and this is the default way that it creates background shorthand. It works in all browsers(old versions of Safari seem to be really picky about the order) and it makes the most sense. I guess I just got used to writing it this way and that’s why I noticed other examples just look off to me.
So, write it down, chant it, tattoo it on your ankle, or whatever makes you remember…
background: #000 url() repeat fixed left top;
</rant>
