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

Example

Preview

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-