CSS mask-repeat Property

❮ Previous Complete CSS Reference Next ❯

Example

Using mask-repeat: no-repeat; and mask-repeat: repeat;:

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

.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-size: 50%;
  mask-size: 50%;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The mask-repeat property sets if/how a mask image will be repeated.

By default, a mask image is repeated both vertically and horizontally.

Default value: repeat
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.maskRepeat="no-repeat"

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

Property
mask-repeat 4.0 -webkit- 79.0 -webkit- 53.0 3.1 -webkit- 15.0 -webkit-

CSS Syntax

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

Property Values

Value Description
repeat The mask image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default
repeat-x The mask image is repeated only horizontally
repeat-y The mask image is repeated only vertically
space The mask image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images
round The mask image is repeated and squished or stretched to fill the space (no gaps)
no-repeat The mask image is not repeated. The image will only be shown once
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

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

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

.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-size: 30%;
  mask-size: 30%;
  -webkit-mask-repeat: space;
  mask-repeat: space;
}
Try it Yourself »

Example

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

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

.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-size: 30%;
  mask-size: 30%;
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
}
Try it Yourself »

Related Pages

CSS reference: mask-image property

CSS reference: mask-mode property

CSS reference: mask-origin property

CSS reference: mask-position property

CSS reference: mask-size property

CSS tutorial: CSS Masking


❮ Previous Complete CSS Reference Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.