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.
-webkit-mask-box-image
sets the mask image for an element's border box.
- Initial value: none
- Applies to: all elements
- Inherited: no
- Media:
visual
- Computed value: as specified
Syntax
-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
Where:
- <mask-box-image>
<uri>
| <gradient> | none- <top> <right> <bottom> <left>
<length> | <percentage>
- <x-repeat> <y-repeat>
repeat | stretch | round | space
Values
- <uri>
- The location of the image resource to be used as a mask image.
- <gradient>
- A -webkit-gradient function to be used as a mask image.
- none
- Used to specify that a border box is to have no mask image.
- <length>
- The size of the mask image's offset. See
<length>
for possible units. - <percentage>
- The mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height).
- repeat
- The mask image is repeated as many times as is necessary to span the border box. May include a partial image if the mask image does not divide evenly into the border box.
- stretch
- The mask image is stretched to contain the border box exactly.
- round
- The mask image is stretched somewhat and repeated such that there is no partial mask image at the end of the border box.
- space
- The mask image is repeated as many times as possible without stretching. There is no partial mask image at the end of the border box.
Formal definition
Value not found in DB!
Formal syntax
Syntax not found in DB!
Examples
Setting an image
.exampleone {
-webkit-mask-box-image: url('mask.png');
}
Offsetting and filling an image
.exampletwo {
-webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
}
Specifications
Not part of any standard.
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
Full support 1 |
Edge
Full support 18 |
Firefox
No support No |
IE
No support No |
Opera
Full support 15 |
Safari
Full support 3.2 |
WebView Android
Full support 2 |
Chrome Android
Full support 18 |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.'
- Non-standard. Expect poor cross-browser support.
See also
-webkit-mask
, -webkit-mask-origin
, -webkit-mask-attachment
,-webkit-mask-clip
,-webkit-mask-image
,-webkit-mask-composite
,-webkit-mask-repeat
-webkit-mask-box-image by Mozilla Contributors is licensed under CC-BY-SA 2.5.