Generated. Do not edit!

Author: bert-github

css3-background/Overview.html

@@ -21,12 +21,12 @@
 
    <h1>CSS Backgrounds and Borders Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 March 2009</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 25 March 2009</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><!-- <a href="http://www.w3.org/TR/2009/WD-css3-background-20090305">http://www.w3.org/TR/2009/WD-css3-background-20090305</a></dd> -->
+    <dd><!-- <a href="http://www.w3.org/TR/2009/WD-css3-background-20090325">http://www.w3.org/TR/2009/WD-css3-background-20090325</a></dd> -->
      <a
      href="http://dev.w3.org/csswg/css3-background">http://dev.w3.org/csswg/css3-background</a>
 
@@ -485,7 +485,8 @@ <h3 id=the-background-color-property><span class=secno>3.2 </span>The
   <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.
     &lsquo;<code class=css>transparent</code>&rsquo;). Examples:</p>
@@ -528,8 +529,8 @@ <h3 id=the-background-image-property><span class=secno>3.3 </span>The
     <tr>
      <th>Value:
 
-     <td>[ <var>&lt;image&gt;</var> | none ] [ , [ <var>&lt;image&gt;</var> |
-      none ] ]*
+     <td><var><a href="#ltbg-imagegt">&lt;bg-image&gt;</a></var> [ , <var><a
+      href="#ltbg-imagegt">&lt;bg-image&gt;</a></var> ]*
 
     <tr>
      <th>Initial:
@@ -564,7 +565,10 @@ <h3 id=the-background-image-property><span class=secno>3.3 </span>The
 
   <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.
+   subsequent image behind the previous one. The type <dfn
+   id=ltbg-imagegt><var>&lt;bg-image&gt;</var></dfn> stands for
+
+  <pre class=rhs><var>&lt;image&gt;</var> | none</pre>
 
   <p>A value of &lsquo;<code class=css>none</code>&rsquo; counts as an image
    layer but draws nothing. An image that is empty (zero width or zero
@@ -798,7 +802,8 @@ <h3 id=the-background-attachment-property><span class=secno>3.5 </span>The
     <tr>
      <th>Value:
 
-     <td>scroll | fixed | local [, scroll | fixed | local]*
+     <td><var><a href="#ltattachmentgt">&lt;attachment&gt;</a></var> [ ,
+      <var><a href="#ltattachmentgt">&lt;attachment&gt;</a></var> ]*
 
     <tr>
      <th>Initial:
@@ -835,7 +840,10 @@ <h3 id=the-background-attachment-property><span class=secno>3.5 </span>The
    are fixed with regard to the <em class=index id=viewport>viewport</em>
    (&lsquo;<code class=css>fixed</code>&rsquo;) scroll along with the element
    (&lsquo;<code class=css>scroll</code>&rsquo; and &lsquo;<code
-   class=css>local</code>&rsquo;).
+   class=css>local</code>&rsquo;). The type <dfn
+   id=ltattachmentgt><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 &lsquo;<code
@@ -970,8 +978,8 @@ <h3 id=the-background-position-property><span class=secno>3.6 </span>The
    within their corresponding <a
    href="#background-positioning-area">background positioning area.</a>
 
-  <p class=syntax>The <dfn
-   id=ltbg-positiongt><var>&lt;bg-position&gt;</var></dfn> stands for:
+  <p>The <dfn id=ltbg-positiongt><var>&lt;bg-position&gt;</var></dfn> stands
+   for:
 
   <pre class=rhs>[
   [ [ <var><a href="#position-percentage">&lt;percentage&gt;</a></var> | <var><a href="#position-length">&lt;length&gt;</a></var> | left | center | right ] ]
@@ -1229,8 +1237,8 @@ <h3 id=the-background-origin-property><span class=secno>3.8 </span>The
     <tr>
      <th>Value:
 
-     <td>[border-box | padding-box | content-box] [, [border-box |
-      padding-box | content-box]]*
+     <td><var><a href="#ltbg-origingt">&lt;bg-origin&gt;</a></var> [ ,
+      <var><a href="#ltbg-origingt">&lt;bg-origin&gt;</a></var> ]*
 
     <tr>
      <th>Initial:
@@ -1269,7 +1277,10 @@ <h3 id=the-background-origin-property><span class=secno>3.8 </span>The
    boxes on several pages) specifies which boxes the &lsquo;<code
    class=property><a
    href="#background-break">background-break</a></code>&rsquo; operates on to
-   determine the background positioning area(s).
+   determine the background positioning area(s). The <dfn
+   id=ltbg-origingt><var>&lt;bg-origin&gt;</var></dfn> stands for:
+
+  <pre class=rhs>border-box | padding-box | content-box</pre>
 
   <dl>
    <dt><dfn id=padding-box>padding-box</dfn>
@@ -1328,12 +1339,8 @@ <h3 id=the-background-size-property><span class=secno>3.9 </span>The
     <tr>
      <th>Value:
 
-     <td>[ [ <var><a href="#position-length">&lt;length&gt;</a></var> |
-      <var><a href="#position-percentage">&lt;percentage&gt;</a></var> | auto
-      ]{1,2} | cover | contain ] [ [ , [ <var><a
-      href="#position-length">&lt;length&gt;</a></var> | <var><a
-      href="#position-percentage">&lt;percentage&gt;</a></var> | auto ]{1,2}
-      ] | cover | contain ]*
+     <td><var><a href="#ltbg-sizegt">&lt;bg-size&gt;</a></var> [ , <var><a
+      href="#ltbg-sizegt">&lt;bg-size&gt;</a></var> ]*
 
     <tr>
      <th>Initial:
@@ -1366,8 +1373,13 @@ <h3 id=the-background-size-property><span class=secno>3.9 </span>The
      <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
+   id=ltbg-sizegt><var>&lt;bg-size&gt;</var></dfn> stands for:
+
+  <pre
+   class=rhs>[ <var><a href="#position-length">&lt;length&gt;</a></var> | <var><a href="#position-percentage">&lt;percentage&gt;</a></var> | auto ]{1,2} | cover | contain</pre>
+
+  <p>Values have the following meanings:
 
   <dl>
    <dt><dfn id=contain>contain</dfn>
@@ -1710,41 +1722,27 @@ <h3 id=the-background-shorthand-property><span class=secno>3.11 </span>The
      <td>see individual properties
   </table>
 
-  <p class=syntax><dfn id=ltbg-layergt><var>&lt;bg-layer&gt;</var></dfn>
-   stands for:
+  <p><dfn id=ltbg-layergt><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 &lsquo;<code class=css>/ <var>&lt;&lsquo;<code class=property><a
-   href="#background-size">background-size</a></code>&rsquo;&gt;</var></code>&rsquo;
-   must occur after &lsquo;<code class=css><var>&lt;&lsquo;<code
-   class=property><a
-   href="#background-position">background-position</a></code>&rsquo;&gt;</var></code>&rsquo;
+  <pre
+   class=rhs><var><a href="#ltbg-imagegt">&lt;bg-image&gt;</a></var> || <var><a href="#ltbg-positiongt">&lt;bg-position&gt;</a></var> || / <var><a href="#ltbg-sizegt">&lt;bg-size&gt;</a></var> || <var><a href="#ltrepeatgt">&lt;repeat&gt;</a></var> || <var><a href="#ltattachmentgt">&lt;attachment&gt;</a></var> || <var><a href="#ltbg-origingt">&lt;bg-origin&gt;</a></var> || no-clip</pre>
+
+  <p>where &lsquo;<code class=css>/ <var><a
+   href="#ltbg-sizegt">&lt;bg-size&gt;</a></var></code>&rsquo; must occur
+   after &lsquo;<code class=css><a
+   href="#ltbg-positiongt"><var>&lt;bg-position&gt;</var></a></code>&rsquo;
    if both are present.
 
-  <p class=syntax><dfn
-   id=ltfinal-bg-layergt><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 &lsquo;<code class=css>/ <var>&lt;&lsquo;<code class=property><a
-   href="#background-size">background-size</a></code>&rsquo;&gt;</var></code>&rsquo;
-   must occur after &lsquo;<code class=css><var>&lt;&lsquo;<code
-   class=property><a
-   href="#background-position">background-position</a></code>&rsquo;&gt;</var></code>&rsquo;
+  <p><dfn id=ltfinal-bg-layergt><var>&lt;final-bg-layer&gt;</var></dfn>
+   stands for:
+
+  <pre
+   class=rhs><var><a href="#ltbg-imagegt">&lt;'bg-image'&gt;</a></var> || <var><a href="#ltbg-positiongt">&lt;bg-position&gt;</a></var> || / <var><a href="#ltbg-sizegt">&lt;bg-size&gt;</a></var> || <var><a href="#ltrepeatgt">&lt;repeat&gt;</a></var> || <var><a href="#ltattachmentgt">&lt;attachment&gt;</a></var> || <var><a href="#ltbg-origingt">&lt;bg-origin&gt;</a></var> || no-clip || <var>&lt;'background-color'&gt;</var></pre>
+
+  <p>where &lsquo;<code class=css>/ <var><a
+   href="#ltbg-sizegt">&lt;bg-size&gt;</a></var></code>&rsquo; must occur
+   after &lsquo;<code class=css><a
+   href="#ltbg-positiongt"><var>&lt;bg-position&gt;</var></a></code>&rsquo;
    if both are present.
 
   <p class=note>Note that a color is permitted in <var><a
@@ -2202,8 +2200,7 @@ <h3 id=the-border-style><span class=secno>4.2 </span>The &lsquo;<code
    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
-   id=ltborder-stylegt>&lt;border-style&gt;</dfn></var> is:
+  <p><var><dfn id=ltborder-stylegt>&lt;border-style&gt;</dfn></var> is:
 
   <pre
    class=rhs>none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset</pre>
@@ -2389,8 +2386,7 @@ <h3 id=the-border-width-properties><span class=secno>4.3 </span>The
 
   <p>These properties set the thickness of the border.
 
-  <p class=syntax>The <dfn
-   id=ltborder-widthgt><var>&lt;border-width&gt;</var></dfn> is
+  <p>The <dfn id=ltborder-widthgt><var>&lt;border-width&gt;</var></dfn> is
 
   <pre
    class=rhs><var><a href="#position-length">&lt;length&gt;</a></var> | thin | medium | thick</pre>
@@ -3977,7 +3973,7 @@ <h2 class=no-num id=property-index>Property index</h2>
      <td><a class=property
       href="#background-attachment">background-attachment</a>
 
-     <td>scroll | fixed | local [, scroll | fixed | local]*
+     <td>&lt;attachment&gt; [ , &lt;attachment&gt; ]*
 
      <td>scroll
 
@@ -4038,7 +4034,7 @@ <h2 class=no-num id=property-index>Property index</h2>
     <tr valign=baseline>
      <td><a class=property href="#background-image">background-image</a>
 
-     <td>[ &lt;image&gt; | none ] [ , [ &lt;image&gt; | none ] ]*
+     <td>&lt;bg-image&gt; [ , &lt;bg-image&gt; ]*
 
      <td>none
 
@@ -4053,8 +4049,7 @@ <h2 class=no-num id=property-index>Property index</h2>
     <tr valign=baseline>
      <td><a class=property href="#background-origin">background-origin</a>
 
-     <td>[border-box | padding-box | content-box] [, [border-box |
-      padding-box | content-box]]*
+     <td>&lt;bg-origin&gt; [ , &lt;bg-origin&gt; ]*
 
      <td>padding-box
 
@@ -4101,9 +4096,7 @@ <h2 class=no-num id=property-index>Property index</h2>
     <tr valign=baseline>
      <td><a class=property href="#background-size">background-size</a>
 
-     <td>[ [ &lt;length&gt; | &lt;percentage&gt; | auto ]{1,2} | cover |
-      contain ] [ [ , [ &lt;length&gt; | &lt;percentage&gt; | auto ]{1,2} ] |
-      cover | contain ]*
+     <td>&lt;bg-size&gt; [ , &lt;bg-size&gt; ]*
 
      <td>auto
 
@@ -4344,6 +4337,10 @@ <h2 class=no-num id=index>Index</h2>
   <p>, <a href="#double-and" title="''&amp;&amp;''"><strong>2</strong></a>
 
   <ul>
+   <li><var><a href="#ltattachmentgt">&lt;attachment&gt;</a></var>, <a
+    href="#ltattachmentgt"
+    title="&lt;attachment&gt;"><strong>3.5</strong></a>
+
    <li>authoring tool, <a href="#authoring-tool" title="authoring
     tool"><strong>5.2</strong></a>
 
@@ -4391,13 +4388,22 @@ <h2 class=no-num id=index>Index</h2>
    <li>background-size, <a href="#background-size"
     title=background-size><strong>3.9</strong></a>
 
+   <li><var><a href="#ltbg-imagegt">&lt;bg-image&gt;</a></var>, <a
+    href="#ltbg-imagegt" title="&lt;bg-image&gt;"><strong>3.3</strong></a>
+
    <li><var><a href="#ltbg-layergt">&lt;bg-layer&gt;</a></var>, <a
     href="#ltbg-layergt" title="&lt;bg-layer&gt;"><strong>3.11</strong></a>
 
+   <li><var><a href="#ltbg-origingt">&lt;bg-origin&gt;</a></var>, <a
+    href="#ltbg-origingt" title="&lt;bg-origin&gt;"><strong>3.8</strong></a>
+
    <li><var><a href="#ltbg-positiongt">&lt;bg-position&gt;</a></var>, <a
     href="#ltbg-positiongt"
     title="&lt;bg-position&gt;"><strong>3.6</strong></a>
 
+   <li><var><a href="#ltbg-sizegt">&lt;bg-size&gt;</a></var>, <a
+    href="#ltbg-sizegt" title="&lt;bg-size&gt;"><strong>3.9</strong></a>
+
    <li>border, <a href="#border" title=border><strong>4.7</strong></a>
 
    <li>border-bottom, <a href="#border-bottom"