Tweak snippets on mask-repeat page

Author: reinink

src/docs/mask-repeat.mdx

@@ -36,9 +36,10 @@ Use the `mask-repeat` utility to repeat the mask image both vertically and horiz
   }
 </Example>
 
+{/* prettier-ignore */}
 ```html
 <!-- [!code classes:mask-repeat] -->
-<div class="mask-[url(/img/circle.png)] mask-size-[50px_50px] mask-repeat ..."></div>
+<div class="mask-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
 ```
 
 </Figure>
@@ -59,9 +60,10 @@ Use the `mask-repeat-x` utility to only repeat the mask image horizontally:
   }
 </Example>
 
+{/* prettier-ignore */}
 ```html
 <!-- [!code classes:mask-repeat-x] -->
-<div class="mask-[url(/img/circle.png)] mask-size-[50px_50px] mask-repeat-x ..."></div>
+<div class="mask-repeat-x mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>
 ```
 
 </Figure>
@@ -82,9 +84,10 @@ Use the `mask-repeat-y` utility to only repeat the mask image vertically:
   }
 </Example>
 
+{/* prettier-ignore */}
 ```html
 <!-- [!code classes:mask-repeat-y] -->
-<div class="mask-[url(/img/circle.png)] mask-size-[50px_50px] mask-repeat-y ..."></div>
+<div class="mask-repeat-y mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>
 ```
 
 </Figure>
@@ -105,9 +108,10 @@ Use the `mask-repeat-space` utility to repeat the mask image without clipping:
   }
 </Example>
 
+{/* prettier-ignore */}
 ```html
 <!-- [!code classes:mask-repeat-space] -->
-<div class="mask-[url(/img/circle.png)] mask-size-[50px_50px] mask-repeat-space ..."></div>
+<div class="mask-repeat-space mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
 ```
 
 </Figure>
@@ -128,9 +132,10 @@ Use the `mask-repeat-round` utility to repeat the mask image without clipping, s
   }
 </Example>
 
+{/* prettier-ignore */}
 ```html
 <!-- [!code classes:mask-repeat-round] -->
-<div class="mask-[url(/img/circle.png)] mask-size-[50px_50px] mask-repeat-round ..."></div>
+<div class="mask-repeat-round mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
 ```
 
 </Figure>
@@ -151,9 +156,10 @@ Use the `mask-no-repeat` utility to prevent a mask image from repeating:
   }
 </Example>
 
+{/* prettier-ignore */}
 ```html
 <!-- [!code classes:mask-no-repeat] -->
-<div class="mask-[url(/img/circle.png)] mask-size-[50px_50px] mask-no-repeat ..."></div>
+<div class="mask-no-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
 ```
 
 </Figure>