Added toothy background-position

index.html

@@ -22,6 +22,7 @@ <h2>One property, two values, endless possiblities</h2>
 <div role="main">
 	<a data-property="background-color" data-from="slategray" data-to="black"></a>
 	<a data-property="background-position" data-from="0 0" data-to="100% 100%" style="background-image: linear-gradient(-45deg, transparent 25%, black 25%, black 50%, transparent 50%, transparent 75%, black 75%, black); background-size:50px 50px"></a>
+    <a data-property="background-position" data-from="3px 0, 3px 0, 15px -150px, 15px -150px" data-to="3px -70px, 3px -70px, 15px -80px, 15px -80px" style="background-color: #E04332; background-repeat: repeat-x; background-size: 24px 300px, 24px 300px,24px 300px, 24px 300px; background-image: linear-gradient(-45deg, slateGray 25%, transparent 25%), linear-gradient(45deg, transparent 75%, slateGray 75%), linear-gradient(45deg, slateGray 25%, transparent 25%), linear-gradient(-45deg, transparent 75%, slateGray 75%);" data-author="kizmarh"></a>
 	<a data-property="background-size" data-from="5px 5px" data-to="150px 150px" style="background-image: repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-position:center"></a>
 	<a data-property="border-radius" data-from="0" data-to="50%"></a>
 	<a data-property="border-radius" data-from="0 100%" data-to="100% 0"></a>