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.
SummaryEdit
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 |
SyntaxEdit
/* 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;
ValuesEdit
- 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
How to read CSS syntax.<repeat-style>[, <repeat-style>]*where
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
ExamplesEdit
.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 compatibilityEdit
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | Not supported | Not supported | Not supported | 4.0 |
See alsoEdit
-webkit-mask
, -webkit-mask-box-image
, -webkit-mask-clip
, -webkit-mask-origin
, -webkit-mask-attachment
, -webkit-mask-image
, -webkit-mask-composite