diff -r 49e5874c505c javafx-ui-common/src/javafx/scene/doc-files/cssref.html
--- a/javafx-ui-common/src/javafx/scene/doc-files/cssref.html	Fri Aug 24 17:18:12 2012 -0400
+++ b/javafx-ui-common/src/javafx/scene/doc-files/cssref.html	Fri Aug 31 08:35:35 2012 -0400
@@ -877,10 +877,14 @@
     </table>
     <h3><a name="typepaint" id="typepaint">&lt;paint&gt;</a></h3>
     <p>Paint values can either be a solid color specified in one of the color
-      syntaxes or they can be a linear or radial gradient.</p>
+      syntaxes, they can be a linear or radial gradient, or an image-pattern.</p>
     <p class="grammar"><a href="#typecolor" class="typelink">&lt;color&gt;</a> |
-      &lt;linear-gradient&gt; | &lt;radial-gradient&gt;</p>
-    <h4>Linear Gradients <span class="grammar" style="font-size: smaller;">&lt;linear-gradient&gt;</span></h4>
+      <a href="#typelinear-gradient" class="typelink">&lt;linear-gradient&gt;</a> |
+      <a href="#typeradial-gradient" class="typelink">&lt;radial-gradient&gt;</a> |
+      <a href="#typeimage-paint" class="typelink">&lt;image-paint&gt;</a></p>
+    <h4>Linear Gradients<span class="grammar" style="font-size: smaller;">
+            <a name="typelinear-gradient" id="typelinear-gradient">&lt;linear-gradient&gt;</a>
+        </span></h4>
     <p class="grammar">linear-gradient( [ [from <a href="#typepoint" class="typelink">&lt;point&gt;</a>
       to <a href="#typepoint" class="typelink">&lt;point&gt;</a>] | [ to
       &lt;side-or-corner&gt;], ]? [ [ repeat | reflect ], ]? <a href="#color-stop"
@@ -920,7 +924,9 @@
     <p class="grammar"><font color="#af0000">linear (&lt;size&gt;, &lt;size&gt;)
         to (&lt;size&gt;, &lt;size&gt;) stops [ (&lt;number&gt;,&lt;color&gt;)
         ]+ [ repeat | reflect ]?</font></p>
-    <h4>Radial Gradients <span class="grammar" style="font-size: smaller;">&lt;radial-gradient&gt;</span></h4>
+    <h4>Radial Gradients <span class="grammar" style="font-size: smaller;">
+            <a name="typeradial-gradient" id="typeradial-gradient">&lt;radial-gradient&gt;</a>
+        </span></h4>
     <p class="grammar">radial-gradient([ focus-angle <a href="#typeangle" class="typelink">&lt;angle&gt;</a>,
       ]? [ focus-distance <a href="#typepercentage" class="typelink">&lt;percentage&gt;</a>,
       ]? [ center <a href="#typepoint" class="typelink">&lt;point&gt;</a>, ]?
@@ -946,6 +952,36 @@
         | &lt;number&gt; ] ]? [ focus-distance &lt;size&gt; ]? [ center
         &lt;size,size&gt; ]? &lt;size&gt; stops [ ( &lt;number&gt;,
         &lt;color&gt; ) ]+ [ repeat | reflect ]?</font></p>
+    <h4>Image Paint <span class="grammar" style="font-size: smaller;">
+            <a name="typeimage-paint" id="typeimage-paint">&lt;image-paint&gt;</a>
+        </span></h4>
+    <p class="grammar">image-paint(<a href="#typestring" class="typelink">&lt;string&gt;</a>,
+      [<a href="#typenumber" class="typelink">&lt;number&gt;</a>,
+      <a href="#typenumber" class="typelink">&lt;number&gt;</a>,
+      <a href="#typenumber" class="typelink">&lt;number&gt;</a>,
+      <a href="#typenumber" class="typelink">&lt;number&gt;</a>,
+      <a href="#typeboolean" class="typelink">&lt;boolean&gt;</a> ]?</p>
+    <p>The parameters, in order, are:<br>
+    <p style="margin-left: 40px;">  
+    <span class="grammar"><a href="#typestring" class="typelink">&lt;string&gt;</a></span>
+      The URL of the image.<br>
+      <span class="grammar"><a href="#typenumber" class="typelink">&lt;number&gt;</a></span>
+      The <i>x</i> origin of the anchor rectangle.<br>
+      <span class="grammar"><a href="#typenumber" class="typelink">&lt;number&gt;</a></span>
+      The <i>y</i> origin of the anchor rectangle.<br>
+      <span class="grammar"><a href="#typenumber" class="typelink">&lt;number&gt;</a></span>
+      The width of the anchor rectangle.<br>
+      <span class="grammar"><a href="#typenumber" class="typelink">&lt;number&gt;</a></span>
+      The height of the anchor rectangle.<br>
+      <span class="grammar"><a href="#typeboolean" class="typelink">&lt;boolean&gt;</a></span>
+      The proportional flag which indicates whether start and end locations are proportional or absolute<br>
+    </p>
+    <p>For a full explanation of the parameters, refer to the 
+        <a href="../paint/ImagePattern.html" class="typelink">ImagePattern</a> javadoc.</p>    
+    <p>Following are examples of the use of image-pattern:</p>
+    <p class="example">image-pattern("images/Duke.png")</p>
+    <p class="example">image-pattern("images/Duke.png", .2, .2, .8, .8, true)</p>        
+    <p class="example">image-pattern("images/Duke.png", 20, 20, 80, 80, false)</p>        
     <h3><a name="typecolor" id="typecolor">&lt;color&gt;</a></h3>
     <p class="grammar">&lt;named-color&gt; | &lt;looked-up-color&gt; |
       &lt;rgb-color&gt; | &lt;hsb-color&gt; | &lt;color-function&gt;</p>
