Clarify implications of two-value syntax for background-position. <http://lists.w3.org/Archives/Public/www-style/2012Mar/0124.html>

Author: fantasai

css3-background/Overview.html

@@ -1118,13 +1118,18 @@ <h3 id=the-background-position><span class=secno>3.6. </span>Positioning
 ]</pre>
 
   <p>If only one value is specified, the second value is assumed to be
-   &lsquo;<code class=property>center</code>&rsquo;. If two values are given
-   and at least one value is not a keyword, then the first value represents
-   the horizontal position (or offset) and the second represents the vertical
-   position (or offset). <var>&lt;percentage&gt;</var> and
-   <var>&lt;length&gt;</var> values here represent an offset of the top left
-   corner of the background image from the top left corner of the background
-   positioning area.
+   &lsquo;<code class=property>center</code>&rsquo;. If two values are given,
+   a length or percentage as the first value represents the horizontal
+   position (or offset) and a length or percentage as the second value
+   represents the vertical position (or offset).
+   <var>&lt;percentage&gt;</var> and <var>&lt;length&gt;</var> values here
+   represent an offset of the top left corner of the background image from
+   the top left corner of the background positioning area.
+
+  <p class=note>Note that a pair of keywords can be reordered while a
+   combination of keyword and length or percentage cannot. So &lsquo;<code
+   class=css>center left</code>&rsquo; is valid while &lsquo;<code
+   class=css>50% left</code>&rsquo; is not.
 
   <p>If three or four values are given, then each
    <var>&lt;percentage&gt;</var> or<var>&lt;length&gt;</var> represents an

css3-background/Overview.src.html

@@ -683,14 +683,18 @@ <h3 id="the-background-position">Positioning Images: the 'background-position' p
 ]</pre>
 
 <p>If only one value is specified, the second value is assumed to be
-'center'. If two values are given and at least one value is not a keyword,
-then the first value represents the horizontal position (or offset) and
-the second represents the vertical position (or
+'center'. If two values are given, a length or percentage as the first
+value represents the horizontal position (or offset) and a length or
+percentage as the second value represents the vertical position (or
 offset). <var>&lt;percentage&gt;</var> and <var>&lt;length&gt;</var>
 values here represent an offset of the top left corner
 of the background image from the top left corner of the background
 positioning area.
 
+<p class="note">Note that a pair of keywords can be reordered while
+a combination of keyword and length or percentage cannot. 
+So ''center left'' is valid while ''50% left'' is not.
+
 <p>If three or four values are given, then
 each <var>&lt;percentage&gt;</var> or<var>&lt;length&gt;</var>
 represents an offset and must be preceded by a keyword,