mask-repeat
Using mask-repeat: no-repeat;
and mask-repeat:
repeat;
:
.mask1 {
-webkit-mask-image: url(sw3logo.png);
mask-image: url(sw3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.mask2 {
-webkit-mask-image:
url(sw3logo.png);
mask-image: url(sw3logo.png);
-webkit-mask-size:
50%;
mask-size: 50%;
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
Try it Yourself »
Definition mask-repeat
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 mask-repeat
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
mask-repeat:
repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;
Property Values mask-repeat
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 mask-repeat
Using mask-repeat: round;
and mask-repeat:
space;
:
.mask1 {
-webkit-mask-image: url(sw3logo.png);
mask-image: url(sw3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: round;
mask-repeat:
round;
}
.mask2 {
-webkit-mask-image: url(sw3logo.png);
mask-image: url(sw3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: space;
mask-repeat:
space;
}
Try it Yourself »
Using mask-repeat: repeat-x;
and mask-repeat:
repeat-y;
:
.mask1 {
-webkit-mask-image: url(sw3logo.png);
mask-image: url(sw3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-x;
mask-repeat:
repeat-x;
}
.mask2 {
-webkit-mask-image: url(sw3logo.png);
mask-image: url(sw3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-y;
mask-repeat:
repeat-y;
}
Try it Yourself »
Related Pages mask-repeat
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