[css-images-4] I added two png images to example 33 to the stripes() function. I resized each of image to 1em, and added a border on the left and also on the right in the second example in transparent.

Author: francescorn

css-images-4/Overview.bs

@@ -2035,9 +2035,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>
+
+		<img src="images/stripes-example-33-1.png" style="height:1em; width:400px;" alt="">
+
 		On the other hand,
 		''stripes(red .1fr, green .2fr, blue 100px)''
 		with a |total width| of ''400px''
@@ -2047,11 +2047,9 @@ Color Stop “Fixup”</h4>
 		the value of the sum of the <<flex>> values,
 		to obtain only 90px,
 		which is then distributed in the 1:2 ratio
-		dictated by the <<flex>> values. (Transparent is shown with a border in the example).
+		dictated by the <<flex>> values.
 
-		<pre class=lang-css>
-		<img src="images/stripes_example_33_2.png" style="height:200px; width:400px;" alt="">
-		</pre>
+		<img src="images/stripes-example-33-2.png" style="height: 1em; width:400px;" alt="">
 
 		(This is similar to how [=flex layout=] deals with small <<flex>> sums on a line,
 		and ensures smoothly continuous behavior