mask-repeat

The mask-repeat property designates whether and how a mask image should be repeated.

Syntax

A mask image is repeated both horizontally and vertically by default.

div.ex { 
  mask-image: url(path-to-image.jpg); 
  mask-repeat: repeat;
  mask-size: 80%; 
}

Values

repeat
Default value. The mask image is repeated both horizontally and vertically by default. If the last image does not fit it will be clipped.

repeat-x
The mask image is repeated horizontally only.

repeat-y
The mask image is repeated vertically only.

space
The mask image is repeated as much as possible without clipping. First and last images are pinned to either side of the element with whitespace distributed evenly between all of the images.

round
The mask image is repeated and squished or stretched to fill the space without any gaps.

no-repeat
The mask image will only be shown once and will not repeat.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of mask-repeat? Submit a codepen.io demo and we'll showcase it here ↴