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.
Initial value | scroll |
---|---|
Applies to | all elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animatable | no |
Canonical order | order of appearance in the formal grammar of the values |
Syntax
/* 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;
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>]*
Examples
body { -webkit-mask-image: url('/images/mask.png'); -webkit-mask-attachment: fixed; }
Browser Compatibility
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 |
See also
-webkit-mask
, -webkit-mask-clip
, -webkit-mask-box-image
, -webkit-mask-origin
, -webkit-mask-image
, -webkit-mask-composite
, -webkit-mask-repeat