CSS mask-repeat Property
CSS mask-repeat specifies how mask images are positioned after they have been sized and positioned. The mask image can be repeated along the vertical, horizontal, or both axes, or it can be left alone.
Syntax
Property Values
| Value | Description |
|---|---|
| repeat | Vertically and horizontally, the mask image is repeated. If the last image does not fit, it will be cropped. This is the default setting. |
| repeat-x | The mask image is only repeated horizontally. |
| repeat-y | The mask image is only repeated vertically. |
| space | The mask image is repeated as many times as possible without being clipped. The first and last images are pinned to the element's left and right sides, respectively, and whitespace is evenly distributed between the images. |
| round | To fill the space, the mask image is repeated and squashed or stretched (no gaps). |
| no-repeat | The image of the mask is not repeated. The image will only be displayed once. |
| initial | This property is set to its default value. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Property | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| mask-repeat | 4.0 -webkit- | 53.0 | 3.1 -webkit- | 79.0 -webkit- | 15.0 -webkit- |