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