[css-images] Add an elementSources example.

Author: tabatkins

css-images/Overview.html

@@ -870,6 +870,26 @@ <h4 class="heading settled heading" data-level=3.4.2 id=elementmap><span class=s
 			it’s then looked for in the document as normal.
 	</ul>
 
+	<div class=example>
+		For example, fancy animating backgrounds can be done with an external canvas:
+
+		<pre>  &lt;script&gt;
+  var bg = document.createElement('canvas');
+  bg.height = 200;
+  bg.width = 1000;
+  drawFancyBackground(bg);
+  CSS.elementSources.set('fancy', bg);
+  &lt;/script&gt;
+  &lt;style&gt;
+  h1 {
+    background-image: element(#fancy);
+  }
+  &lt;/style&gt;
+</pre>
+<p>		As the "fancy" canvas is drawn into and animated,
+		the backgrounds of all the H1 elements will automatically update in tandem.
+	</div>
+
 <h4 class="heading settled heading" data-level=3.4.3 id=element-cycles><span class=secno>3.4.3 </span><span class=content>
 Cycle Detection</span><a class=self-link href=#element-cycles></a></h4>
 

css-images/Overview.src.html

@@ -840,6 +840,28 @@ <h4 id='elementmap'>
 			it's then looked for in the document as normal.
 	</ul>
 
+	<div class='example'>
+		For example, fancy animating backgrounds can be done with an external canvas:
+
+		<pre>
+			&lt;script>
+			var bg = document.createElement('canvas');
+			bg.height = 200;
+			bg.width = 1000;
+			drawFancyBackground(bg);
+			CSS.elementSources.set('fancy', bg);
+			&lt;/script>
+			&lt;style>
+			h1 {
+				background-image: element(#fancy);
+			}
+			&lt;/style>
+		</pre>
+
+		As the "fancy" canvas is drawn into and animated,
+		the backgrounds of all the H1 elements will automatically update in tandem.
+	</div>
+
 <h4 id='element-cycles'>
 Cycle Detection</h4>