Changed the spriting example to use an actual image.

Author: tabatkins

css3-images/Overview.html

@@ -414,13 +414,17 @@ <h3 id=url><span class=secno>4.1. </span> Image References and Image
    rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
 
   <div class=example>
-   <p>For example,</p>
+   <p>For example, given the following image* and CSS:</p>
+   <a href=sprites.svg> <img alt="[9 circles, with 0 to 8 eighths filled in]"
+   height=20 src=sprites.svg width=180> </a>
+   <pre>background-image: url('sprites.svg#xywh=40,0,20,20')</pre>
 
-   <pre>background-image: url('sprites.png#xywh=10,30,60,20')</pre>
+   <p>...the background of the element will be the portion of the image that
+    starts at (40px,0px) and is 20px wide and tall, which is just the circle
+    with a quarter filled in.</p>
 
-   <p>uses the 60 pixel by 20 pixel rectangle of <code>sprites.png</code>
-    beginning at the point 10 pixels in from the left, 30 pixels down from
-    the top.
+   <p><small>* SVG-in-&lt;img> support required. Click the picture to view
+    the SVG directly.</small></p>
   </div>
 
   <p class=note>Note however that a UA that doesn't understand the media
@@ -435,7 +439,7 @@ <h3 id=url><span class=secno>4.1. </span> Image References and Image
    <p>In the example below, the &lsquo;<code class=css>image()</code>&rsquo;
     notation is used together with the media fragment syntax, so that UAs
     that don't support media fragments fail to parse the second declaration
-    and use the first.
+    and use the first.</p>
 
    <pre>
 <!-- -->background-image: url('swirl.png'); /* old UAs */

css3-images/Overview.src.html

@@ -208,12 +208,18 @@ <h3 id="url">
 	[[!MEDIA-FRAGS]]
 
 	<div class="example">
-		<p>For example,</p>
+		<p>For example, given the following image* and CSS:</p>
 
-		<pre>background-image: url('sprites.png#xywh=10,30,60,20')</pre>
+		<a href="sprites.svg">
+			<img src="sprites.svg" height="20" width="180" alt="[9 circles, with 0 to 8 eighths filled in]">
+		</a>
 
-		<p>uses the 60 pixel by 20 pixel rectangle of <code>sprites.png</code> beginning
-		at the point 10 pixels in from the left, 30 pixels down from the top.
+		<pre>background-image: url('sprites.svg#xywh=40,0,20,20')</pre>
+
+		<p>...the background of the element will be the portion of the image that starts at (40px,0px)
+		and is 20px wide and tall, which is just the circle with a quarter filled in.</p>
+
+		<p><small>* SVG-in-&lt;img> support required.  Click the picture to view the SVG directly.</small></p>
 	</div>
 
 	<p class="note">Note however that a UA that doesn't understand the media
@@ -226,11 +232,11 @@ <h3 id="url">
 	<div class="example">
 		<p>In the example below, the ''image()'' notation is used together with
 		the media fragment syntax, so that UAs that don't support media fragments
-		fail to parse the second declaration and use the first.
+		fail to parse the second declaration and use the first.</p>
+
 		<pre>
 <!-- -->background-image: url('swirl.png'); /* old UAs */
 <!-- -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre>
-		</div>
 	</div>
 
 <!-- ====================================================================== -->