-webkit-mask-attachment

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

If a mask-image is specified, -webkit-mask-attachment determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.

/* Keyword values */
-webkit-mask-attachment: scroll;
-webkit-mask-attachment: fixed;
-webkit-mask-attachment: local;

/* Multiple values */
-webkit-mask-attachment: scroll, local;
-webkit-mask-attachment: fixed, local, scroll;

/* Global values */
-webkit-mask-attachment: inherit;
-webkit-mask-attachment: initial;
-webkit-mask-attachment: unset;

Syntax

Values

scroll: If scroll is specified, the mask image scrolls within the viewport along with the block that contains the mask image.
fixed: If fixed is specified, the mask image does not scroll with its containing element, instead remaining stationary within the viewport.

Formal definition

Initial value	`scroll`
Applies to	all elements
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

<attachment>#where 
<attachment> = scroll | fixed | local

Examples

Fixing a mask image to the viewport

body {
  -webkit-mask-image: url('images/mask.png');
  -webkit-mask-attachment: fixed;
}

Specifications

Not part of any standard.

Browser compatibility

BCD tables only load in the browser