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

The Wrong Way

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 Wrong Way

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?

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;


› Journal Archives

Where is the Archive?

My journal is now located at my dedicated blog site. You can still reach the old entries via search and direct permalink link, but I will soon phase out all of these entries. Prepare for link rot.

Recent Blog

  • No More

Recent Code

  • No more

©1992-2016 qrayg.com | all rights reserved.