Cross-linked various value types, such as <repeat> and <bg-image>.

Author: bert-github

css3-background/Overview.src.html

@@ -257,7 +257,7 @@ <h3>The 'background-color' property</h3>
 
 <div class="issue">
 <p>A previous draft used the syntax
-<pre>background-color: &lt;color&gt; [ / &lt;color&gt; ]? |  / &lt;color&gt;</pre>
+<pre class=rhs>background-color: &lt;color&gt; [ / &lt;color&gt; ]? |  / &lt;color&gt;</pre>
 <p>where omission of the first color implied the initial value
 (i.e. ''transparent''). Examples:</p>
 <pre>
@@ -286,8 +286,8 @@ <h3>The 'background-image' property</h3>
       <td><dfn>background-image</dfn>
     <tr>
       <th>Value:
-      <td>[ <var>&lt;image&gt;</var> | none ]
-        [ , [ <var>&lt;image&gt;</var> | none ] ]*
+      <td><var>&lt;bg-image&gt;</var>
+	[ , <var>&lt;bg-image&gt;</var> ]*
     <tr>
       <th>Initial:
       <td>none
@@ -311,6 +311,9 @@ <h3>The 'background-image' property</h3>
 <p>This property sets the background image(s) of an element. Images
 are drawn with the first specified one on top (closest to the user)
 and each subsequent image behind the previous one.
+The type <dfn><var>&lt;bg-image&gt;</var></dfn> stands for
+
+<pre class="rhs"><var>&lt;image&gt;</var> | none</pre>
 
 <p>A value of ''none'' counts as an image layer but draws
 nothing. An image that is empty (zero width or zero height), that
@@ -504,7 +507,7 @@ <h3>The 'background-attachment' property</h3>
       <td><dfn>background-attachment</dfn>
     <tr>
       <th>Value:
-      <td>scroll | fixed | local [, scroll | fixed | local]*
+      <td><var>&lt;attachment&gt;</var>	[ , <var>&lt;attachment&gt;</var> ]*
     <tr>
       <th>Initial:
       <td>scroll
@@ -529,6 +532,9 @@ <h3>The 'background-attachment' property</h3>
 they are fixed with regard to the <em class="index">viewport</em>
 (''fixed'') scroll along with the element (''scroll''
 and ''local'').
+The type <dfn><var>&lt;attachment&gt;</var></dfn> stands for:
+
+<pre class="rhs">scroll | fixed | local</pre>
 
 <p>Note that there is only one viewport per view. If an element has a
 scrolling mechanism (see  the 'overflow' property [[!CSS21]]), a
@@ -633,7 +639,7 @@ <h3>The 'background-position' property</h3>
 their initial position (after any <a href="#the-background-size">resizing</a>)
 within their corresponding <span>background positioning area.</span>
 
-<p class=syntax>The <dfn><var>&lt;bg-position&gt;</var></dfn> stands
+<p>The <dfn><var>&lt;bg-position&gt;</var></dfn> stands
 for:
 <pre class="rhs">[
   [ [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> | left | center | right ] ]
@@ -845,8 +851,8 @@ <h3>The 'background-origin' property</h3>
       <td><dfn>background-origin</dfn>
     <tr>
       <th>Value:
-      <td>[border-box | padding-box | content-box]
-        [, [border-box | padding-box | content-box]]*
+      <td><var>&lt;bg-origin&gt;</var>
+        [ , <var>&lt;bg-origin&gt;</var> ]*
     <tr>
       <th>Initial:
       <td>padding-box
@@ -871,7 +877,10 @@ <h3>The 'background-origin' property</h3>
 <dfn id="background-positioning-area">background positioning area</dfn>.
 For elements rendered as multiple boxes (e.g., inline boxes on several
 lines, boxes on several pages) specifies which boxes the 'background-break'
-operates on to determine the background positioning area(s).</p>
+operates on to determine the background positioning area(s). The
+<dfn><var>&lt;bg-origin&gt;</var></dfn> stands for:
+
+<pre class=rhs>border-box | padding-box | content-box</pre>
 
 <dl>
   <dt><dfn>padding-box</dfn>
@@ -909,10 +918,7 @@ <h3>The 'background-size' property</h3>
       <td><dfn>background-size</dfn>
     <tr>
       <th>Value:
-      <td>[ [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>
-        | auto ]{1,2} | cover | contain ]
-        [ [ , [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>
-        | auto ]{1,2} ] | cover | contain ]*
+      <td><var>&lt;bg-size&gt;</var> [ , <var>&lt;bg-size&gt;</var> ]*
     <tr>
       <th>Initial:
       <td>auto
@@ -933,8 +939,12 @@ <h3>The 'background-size' property</h3>
       <td>for &lt;length&gt; the absolute value, otherwise as specified
 </table>
 
-<p>Specifies the size of the background images. Values have the
-following meanings:
+<p>Specifies the size of the background images. The type
+<dfn><var>&lt;bg-size&gt;</var></dfn> stands for:
+
+<pre class=rhs>[ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | auto ]{1,2} | cover | contain</pre>
+
+<p>Values have the following meanings:
 
 <dl>
   <dt><dfn>contain</dfn></dt>
@@ -1235,28 +1245,19 @@ <h3>The 'background' shorthand property</h3>
       <td>see individual properties
 </table>
 
-<p class=syntax><dfn><var>&lt;bg-layer&gt;</var></dfn> stands for:
-<pre class="rhs"><var>&lt;'background-image'&gt;</var>
-|| <var>&lt;'background-position'&gt;</var>
-|| / <var>&lt;'background-size'&gt;</var>
-|| <var>&lt;'background-repeat'&gt;</var>
-|| <var>&lt;'background-attachment'&gt;</var>
-|| <var>&lt;'background-origin'&gt;</var>
-|| no-clip</pre>
-<p>where ''/ <var>&lt;'background-size'&gt;</var>'' must occur after
-''<var>&lt;'background-position'&gt;</var>'' if both are present.
-
-<p class=syntax><dfn><var>&lt;final-bg-layer&gt;</var></dfn> stands for:
-<pre class="rhs"><var>&lt;'background-image'&gt;</var>
-|| <var>&lt;'background-position'&gt;</var>
-|| / <var>&lt;'background-size'&gt;</var>
-|| <var>&lt;'background-repeat'&gt;</var>
-|| <var>&lt;'background-attachment'&gt;</var>
-|| <var>&lt;'background-origin'&gt;</var>
-|| no-clip
-|| <var>&lt;'background-color'&gt;</var></pre>
-<p>where ''/ <var>&lt;'background-size'&gt;</var>'' must occur after
-''<var>&lt;'background-position'&gt;</var>'' if both are present.
+<p><dfn><var>&lt;bg-layer&gt;</var></dfn> stands for:
+
+<pre class="rhs"><var>&lt;bg-image&gt;</var> || <var>&lt;bg-position&gt;</var> || / <var>&lt;bg-size&gt;</var> || <var>&lt;repeat&gt;</var> || <var>&lt;attachment&gt;</var> || <var>&lt;bg-origin&gt;</var> || no-clip</pre>
+
+<p>where ''/ <var>&lt;bg-size&gt;</var>'' must occur after
+''<var>&lt;bg-position&gt;</var>'' if both are present.
+
+<p><dfn><var>&lt;final-bg-layer&gt;</var></dfn> stands for:
+
+<pre class="rhs"><var>&lt;'bg-image'&gt;</var> || <var>&lt;bg-position&gt;</var> || / <var>&lt;bg-size&gt;</var> || <var>&lt;repeat&gt;</var> || <var>&lt;attachment&gt;</var> || <var>&lt;bg-origin&gt;</var> || no-clip || <var>&lt;'background-color'&gt;</var></pre>
+
+<p>where ''/ <var>&lt;bg-size&gt;</var>'' must occur after
+''<var>&lt;bg-position&gt;</var>'' if both are present.
 
 <p class=note>Note that a color is permitted in
 <var>&lt;final-bg-layer&gt;</var>, but not in <var>&lt;bg-layer&gt;</var>.
@@ -1594,7 +1595,7 @@ <h3 id="the-border-style">The 'border-style' properties</h3>
 respectively. A missing left is the same as right, a missing bottom is
 the same as top, and a missing right is also the same as top.
 
-<p class=syntax><var><dfn>&lt;border-style&gt;</dfn></var> is:
+<p><var><dfn>&lt;border-style&gt;</dfn></var> is:
 <pre class="rhs">none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset</pre>
 
 <p>Values have the following meanings:
@@ -1734,7 +1735,7 @@ <h3>The 'border-width' properties</h3>
 
 <p>These properties set the thickness of the border.
 
-<p class=syntax>The <dfn><var>&lt;border-width&gt;</var></dfn> is
+<p>The <dfn><var>&lt;border-width&gt;</var></dfn> is
 <pre class="rhs"><var>&lt;length&gt;</var> | thin | medium | thick</pre>
 
 <p>The <var>&lt;length&gt;</var> may not be