Add some more calc() examples.

Author: tabatkins

css3-values/Overview.src.html

@@ -921,6 +921,35 @@ <h3 id="calc">
 		<p>If the rest of the design is specified using the ''rem'' unit, the entire layout will scale to match the viewport width.</p>
 	</div>
 
+	<div class='example'>
+		<p>
+			The following example stacks two centered background images,
+			with one offset slightly from the other.
+
+		<pre>
+.foo {
+	background: url(top.png), url(bottom.png);
+	background-repeat: no-repeat;
+	background-position: calc(50% + 20px) calc(50% + 20px), 50% 50%;
+}
+</pre>
+	</div>
+
+	<div>
+		<p>
+			This example shows how to place color-stops on a gradient an equal distance from either end.
+
+		<pre>
+.foo {
+	background-image: linear-gradient(to right, silver, 
+	                                            white 50px, 
+	                                            white calc(100% - 50px), 
+	                                            silver);
+}
+</pre>
+	</div>
+
+
 	<p>The expression language of these functions is described by
 	the grammar and prose below.