Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today.
In CSS, the mask-repeat property tells a mask if it should repeated or not and in which directions. It’s a lot like background-repeat. The default is repeat.
This mask does not repeat:
This mask repeats both ways:
This mask repeats along the x axis:
This mask repeats along the y axis:
Browser support
More information
Clipping and Masking in CSS
Masking vs. Clipping: When to Use Each
33: Clipping and Masking
#185: Playing with CSS Masks
Mask Compositing: The Crash Course
Image Fragmentation Effect With CSS Masks and Custom Properties
Related properties
mask-clip
.element { mask-clip: padding-box; }
mask-image
.element { mask-image: url(star.svg); }
mask-mode
.element { mask-mode: alpha; }
mask-origin
.element { mask-origin: content-box; }
mask-position
.element { mask-position: 20px center; }
mask-size
.element { mask-size: 200px 100px; }
mask-type
.element { mask-type: alpha; }