Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Summary
The -webkit-mask-repeat property specifies whether and how a mask image is repeated (tiled).
| Initial value | repeat |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animatable | no |
| Canonical order | order of appearance in the formal grammar of the values |
Syntax
/* Single keyword values */ -webkit-mask-repeat: repeat; -webkit-mask-repeat: repeat-x; -webkit-mask-repeat: repeat-y; -webkit-mask-repeat: no-repeat; /* Multiple keyword values */ -webkit-mask-repeat: repeat, repeat-x, no-repeat; /* Global values */ -webkit-mask-repeat: inherit; -webkit-mask-repeat: initial; -webkit-mask-repeat: unset;
Values
- repeat
- The mask image is repeated both horizontally and vertically.
- repeat-x
- The mask image is repeated horizontally only.
- repeat-y
- The mask image is repeated vertically only.
- no-repeat
- The mask image is not repeated; only one copy of the mask image is drawn. The remainder of the masked element's content is not displayed.
Formal syntax
<repeat-style>[, <repeat-style>]*where
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
Examples
.exampleone {
-webkit-mask-image: url('mask.png');
-webkit-mask-repeat: repeat-x;
}
.exampletwo {
-webkit-mask-image: url('mask.png');
-webkit-mask-repeat: no-repeat;
}
Multiple mask image support
You can specify a different <repeat-style> for each mask image, separated by commas:
.examplethree {
-webkit-mask-image: url('mask1.png'), url('mask2.png');
-webkit-mask-repeat: repeat-x, repeat-y;
}
Each image is matched with the corresponding repeat style, from first specified to last.
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 | Not supported | Not supported | Not supported | 4.0 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 2.1 | ? | ? | ? | 3.2 |
See also
-webkit-mask, -webkit-mask-box-image, -webkit-mask-clip, -webkit-mask-origin, -webkit-mask-attachment, -webkit-mask-image, -webkit-mask-composite