CSS mask-repeat property

Property values

repeatDefault

The mask mask image is repeated along both axes to fill the painting area completely. It is the same as repeat repeat.

mask-repeat: repeat;

Try it { }

no-repeat

The mask image should not be repeated to fill the painting area.

mask-repeat: no-repeat;

Try it { }

repeat-x

The mask image is repeated along x-axis only. It is the same as repeat no-repeat

mask-repeat: repeat-x;

Try it { }

repeat-y

The mask image is repeated along y-axis only. It is the same as no-repeat repeat

mask-repeat: repeat-y;

Try it { }

space

In this case, the mask images are repeated and spaced out (kept at a distance) so as to fill the painting area completely. The first and last mask images must touch the corners of the painting area.

mask-repeat: space;

Try it { }

round

The image is repeated untill it fills the background painting area. If it does not fit the painting area a whole number of times, the mask image is rescaled so as to fit the area.

mask-repeat: round;

Try it { }