The mask-repeat property
The mask-repeat property sets how the mask repeats when its dimensions are smaller than the element's dimensions.
Works similarly to background-repeat,
but applies to masks.
Syntax
selector {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Values
| Value | Description |
|---|---|
repeat |
Mask repeats along both axes (default). |
no-repeat |
Mask doesn't repeat. |
repeat-x |
Mask repeats only horizontally. |
repeat-y |
Mask repeats only vertically. |
space |
Mask repeats with equal spacing between instances. |
round |
Mask scales to fill space evenly. |
Example . No repetition (no-repeat)
Single heart in the center without repetition:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 100px;
mask-repeat: no-repeat;
}
:
Example . Horizontal repetition (repeat-x)
Hearts repeat only horizontally:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left center;
mask-size: 50px;
mask-repeat: repeat-x;
}
:
Example . Vertical repetition (repeat-y)
Hearts repeat only vertically:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center top;
mask-size: 50px;
mask-repeat: repeat-y;
}
:
Example . Spaced repetition (space)
Hearts are evenly distributed with spacing:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Example . Scaled repetition (round)
Hearts are scaled to fill space evenly:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
See also
-
property
mask-size,
defines the mask size -
property
mask-position,
sets the mask position -
property
mask,
shorthand for all masking properties
