This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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