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
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.
Check out Quirksmode, Peter-Paul has a great overview of
It's only about combinations isn't it? If you don't need
60% then it shouldn't matter in any browser.
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.
middle is incorrect? It is only correct for
vertical-align, not for
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.
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
I'm not really sure what you're onto here...
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.
I ran into that a couple of weeks ago, Opera indeed doesn't support it.
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?
Okay, why doesn't my last message look like the preview?
Matthew: you don't combine a length (e.g.:
12px) with a keyword (