-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 -webkit-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;

Initial value	`scroll`
Applies to	all elements
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	order of appearance in the formal grammar of the values

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 syntax

<attachment> [, <attachment> ]*where 
<attachment> = scroll | fixed | local

Examples

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

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes) No support 24.0	No support	No support	No support	4.0

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	2.1	No support	No support	No support	3.2

Syntax

Values

Formal syntax

Examples

Browser Compatibility

See also

Document Tags and Contributors