CSS mask-repeat property

Description

CSS mask-repeat specifies how the mask images are placed after they have been sized and positioned.

Syntax

mask-repeat : no-repeat | repeat | repeat-x | repeat-y | space | round

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;

no-repeat

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

mask-repeat: no-repeat;

repeat-x

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

mask-repeat: repeat-x;

repeat-y

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

mask-repeat: repeat-y;

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;

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;

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?

 
×

Ctrl+D