Anne van Kesteren

Do not combine a length with a keyword on background-position

Although Internet Explorer already supports it for ages and it is very logical that such combinations are possible, try to avoid using them. It was only recently implemented in Mozilla (Mozilla 1.7, Firefox 1.0, perhaps Firefox 0.9) and is not supported by Safari. At least, not with the Safari I was testing on Mac OS X 10.2. Not sure about Opera, I only quickly tested it with Opera 8 beta 1 which seems to support it fine.

However, although most recent browsers support it (except for Safari), it is a trivial change to replace the center value with 50%, right with 100%, et cetera. For your information; the reason that browsers did not support this earlier is because it only recently changed. Actually, in official terms it has not changed at all, since it is part of CSS 2.1.

Comments

  1. Check out Quirksmode, Peter-Paul has a great overview of background-position support.

    Posted by Robbert Broersma at

  2. It's only about combinations isn't it? If you don't need 60% then it shouldn't matter in any browser.

    Posted by Frenzie at

  3. As you are talking about background-position, there seem to be a rather large bunch of people who use center as a vertical positioning keyword instead of middle. Strangely enough, it seems to work.

    Posted by Patrys at

  4. Perhaps because middle is incorrect? It is only correct for vertical-align, not for background-position.

    Posted by Anne at

  5. Ah, I am stupid. Excuse me for my error but I actually meant vertical-align. I was trying to say that people use center there. You can delete my comment as it is loaded with artificial stupidity due to lack of coffee.

    Posted by Patrys at

  6. Good to know that not using such keywords pays off :)

    I don't like using keywords because it isn't very sufficient (bytes and stuff), and why should you use it? It isn't more clear if you're using center instead of 50%...

    Just my 2 cents

    Posted by Mark at

  7. I'm not really sure what you're onto here...

    Posted by Mark Wubben at

  8. Using keywords makes it more clear. left is more readable than 0% if someone isn't sure which side 100% stands for. I'm also not sure how it corellates with R2L languages? Is 0% still left there? I don't have enough time to check the specs right now.

    Posted by Patrys at

  9. I ran into that a couple of weeks ago, Opera indeed doesn't support it.

    Posted by Laurens Holst at

  10. I use the following CSS on a website of mine: 

    background-position: top left; ... background-position: left; ... background-position: bottom left;

    It works fine in Firefox 1.0, IE 6.0 SP2 and Opera 7.5, and it would appear to me that this is valid under CSS 2.1. Any danger in using this on other browsers?

    Posted by Matthew Raymond at

  11. Okay, why doesn't my last message look like the preview?

    Posted by Matthew Raymond at

  12. Matthew: you don't combine a length (e.g.:50%, 1.3em, 12px) with a keyword (center, top, left).

    Posted by Robbert Broersma at