mask-size

Summary

Specifies the size of the mask images, similar to the CSS background-size property.

Overview table

Initial value: auto
Applies to: All elements. It applies to container elements without the <defs> and graphics elements in SVG.
Inherited: No
Media: visual
Computed value: As specified, but with lengths made absolute.
Animatable: No

CSS Object Model Property
:

Percentages: See text.

Syntax

mask-size: auto
mask-size: contain
mask-size: cover
mask-size: length
mask-size: percentage

Values

auto: The intrinsic height/width of the mask image is used.
contain: Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and height can fit inside the background positioning area.
cover: Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and height can completely cover the background positioning area.
length: A floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
percentage: An integer, followed by a percent (%). A percentage value is relative to the background positioning area.

Examples

/* contain */
body {
        background-color: white;
        mask-image: url(big-black-dot.jpg);
        mask-position: bottom right;
        mask-repeat: no-repeat;
        mask-size: contain;
    }

Related specifications

CSS Masking Level 1: W3C Editor’s Draft