CSS mask-repeat property

Previous Page mask-position
Next Page mask-size

Definition and Usage

mask-repeat The property sets whether and how the masked image repeats.

By default, the masked image repeats in both vertical and horizontal directions.

Instance

Example 1

using mask-repeat: no-repeat; and mask-repeat: repeat;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: repeat;
}

Try It Yourself

Example 2

using mask-repeat: round; and mask-repeat: space;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

Try It Yourself

Example 3

using mask-repeat: repeat-x; and mask-repeat: repeat-y;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

Try It Yourself

CSS Syntax

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

Property Value

Value	Description
repeat	The masked image repeats in both vertical and horizontal directions. If the last image is not suitable, it will be clipped. This is the default value.
repeat-x	The masked image repeats only horizontally.
repeat-y	The masked image repeats only vertically.
space	The masked image repeats as much as possible without being clipped. The first and last images are fixed on the sides of the element, and the blank space between the images is evenly distributed.
round	The masked image repeats and is compressed or stretched to fill the space (without gaps).
no-repeat	The masked image does not repeat. The image is displayed only once.
initial	Sets this property to its default value. See: initial.
inherit	Inherits this property from its parent element. See: inherit.

Technical Details

Default Value:	repeat
Inheritance:	No
Animation Production:	Not supported. See:Animation-related Properties.
Version:	CSS Masking Module Level 1
JavaScript Syntax:	object.style.maskRepeat="no-repeat"