CSS mask-size Property

Definition and Usage

mask-size This property specifies the size of the mask layer image.

Set the size of the mask layer image (in percentage):

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

Set the size of the mask layer image (in pixels):

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

mask-size: auto|size|contain|cover|initial|inherit;

Value	Description
auto	Default Value.
size	Specify the size of the masked image, which can be in units such as px, em, or %.
contain	Scale the masked image so that both its width and height can fit inside the container.
cover	Scale the masked image so that both its width and height can cover the container.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Default Value:	auto
Inheritance:	No
Animation Creation:	Not supported. See:Animation-related Properties.
Version:	CSS Masking Module Level 1
JavaScript Syntax:	object.style.maskSize="100px 200px"