mask-repeat

Example

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

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

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

Try it Yourself »

Definition mask-repeat

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 mask-repeat

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

Property Values mask-repeat

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 mask-repeat

Example

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

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

.mask2 {
-webkit-mask-image: url(sw3logo.png);
mask-image: url(sw3logo.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(sw3logo.png);
mask-image: url(sw3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
}

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

Try it Yourself »