[css-images-4] Add two png images to example 33 to the stripes() function.

Author: francescorn

css-images-4/Overview.bs

@@ -2011,7 +2011,9 @@ Color Stop “Fixup”</h4>
 		will result in a 100px red stripe and 200px green stripe,
 		giving red 1 share and green 2 shares of the 300px remaining
 		after subtracting blue's 100px from the 400px total.
-		
+		<pre class=lang-css>
+		<img src="images/stripes_example_33_1.png" style="height:200px; width:400px;" alt="">
+		</pre>
 		On the other hand,
 		''stripes(red .1fr, green .2fr, blue 100px)''
 		with a |total width| of ''400px''
@@ -2022,7 +2024,11 @@ Color Stop “Fixup”</h4>
 		to obtain only 90px,
 		which is then distributed in the 1:2 ratio
 		dictated by the <<flex>> values.
-		
+
+		<pre class=lang-css>
+		<img src="images/stripes_example_33_2.png" style="height:200px; width:400px;" alt="">
+		</pre>
+
 		(This is similar to how [=flex layout=] deals with small <<flex>> sums on a line,
 		and ensures smoothly continuous behavior
 		as the <<flex>> values approach zero.)