CSS mask-repeat Property
Example
Using mask-repeat: no-repeat; and mask-repeat:
repeat;:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.mask2 {
-webkit-mask-image:
url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size:
50%;
mask-size: 50%;
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The mask-repeat property sets if/how a mask
image will be repeated.
By default, a mask image is repeated both vertically and horizontally.
| Default value: | repeat |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.maskRepeat="no-repeat" |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| mask-repeat | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 3.1 -webkit- | 15.0 -webkit- |
CSS Syntax
mask-repeat:
repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;
Property Values
| Value | Description |
|---|---|
| repeat | The mask image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default |
| repeat-x | The mask image is repeated only horizontally |
| repeat-y | The mask image is repeated only vertically |
| space | The mask image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images |
| round | The mask image is repeated and squished or stretched to fill the space (no gaps) |
| no-repeat | The mask image is not repeated. The image will only be shown once |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Using mask-repeat: round; and mask-repeat:
space;:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: round;
mask-repeat:
round;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: space;
mask-repeat:
space;
}
Try it Yourself »
Example
Using mask-repeat: repeat-x; and mask-repeat:
repeat-y;:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-x;
mask-repeat:
repeat-x;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-y;
mask-repeat:
repeat-y;
}
Try it Yourself »
Related Pages
CSS reference: mask-image property
CSS reference: mask-mode property
CSS reference: mask-origin property
CSS reference: mask-position property
CSS reference: mask-size property
CSS tutorial: CSS Masking
