Mask Repeat

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "mask-repeat"; export const description = "Utilities for controlling the repetition of an element's mask image.";

<ApiTable rows={[ ["mask-repeat", "mask-repeat: repeat;"], ["mask-no-repeat", "mask-repeat: no-repeat;"], ["mask-repeat-x", "mask-repeat: repeat-x;"], ["mask-repeat-y", "mask-repeat: repeat-y;"], ["mask-repeat-space", "mask-repeat: space;"], ["mask-repeat-round", "mask-repeat: round;"], ]} />

Examples

Basic example

Use the mask-repeat utility to repeat the mask image both vertically and horizontally:

<Figure> <Example> { <div className="flex flex-col py-8"> <Stripes className="h-40 w-full rounded-lg" border> <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-center mask-repeat"></div> </Stripes> </div> } </Example> ```html <!-- [!code classes:mask-repeat] --> <div class="mask-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div> ``` </Figure>

Repeating horizontally

Use the mask-repeat-x utility to only repeat the mask image horizontally:

<Figure> <Example> { <div className="flex flex-col py-8"> <Stripes className="h-40 w-full rounded-lg" border> <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-center mask-repeat-x"></div> </Stripes> </div> } </Example> ```html <!-- [!code classes:mask-repeat-x] --> <div class="mask-repeat-x mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div> ``` </Figure>

Repeating vertically

Use the mask-repeat-y utility to only repeat the mask image vertically:

<Figure> <Example> { <div className="flex flex-col py-8"> <Stripes className="h-40 w-full rounded-lg" border> <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-center mask-repeat-y"></div> </Stripes> </div> } </Example> ```html <!-- [!code classes:mask-repeat-y] --> <div class="mask-repeat-y mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div> ``` </Figure>

Preventing clipping

Use the mask-repeat-space utility to repeat the mask image without clipping:

<Figure> <Example resizable> { <div className="flex flex-col py-8"> <Stripes className="h-40 w-full rounded-lg" border> <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-repeat-space"></div> </Stripes> </div> } </Example> ```html <!-- [!code classes:mask-repeat-space] --> <div class="mask-repeat-space mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div> ``` </Figure>

Preventing clipping and gaps

Use the mask-repeat-round utility to repeat the mask image without clipping, stretching if needed to avoid gaps:

<Figure> <Example resizable> { <div className="flex flex-col py-8"> <Stripes className="h-40 w-full rounded-lg" border> <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-repeat-round"></div> </Stripes> </div> } </Example> ```html <!-- [!code classes:mask-repeat-round] --> <div class="mask-repeat-round mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div> ``` </Figure>

Disabling repeating

Use the mask-no-repeat utility to prevent a mask image from repeating:

<Figure> <Example> { <div className="flex flex-col py-8"> <Stripes className="h-40 w-full rounded-lg" border> <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-center mask-no-repeat"></div> </Stripes> </div> } </Example> ```html <!-- [!code classes:mask-no-repeat] --> <div class="mask-no-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div> ``` </Figure>

Responsive design

<ResponsiveDesign property="mask-repeat" defaultClass="mask-repeat" featuredClass="mask-repeat-x" />