mask-position

The mask-position CSS property sets the initial position, relative to the mask position layer defined by mask-origin for each defined mask image.

Initial value	center
Applies to	all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inherited	no
Percentages	refer to size of mask painting area minus size of mask layer image (see the text for background-position)
Media	visual
Computed value	Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
Animation type	a repeatable list of , a simple list of , a length, percentage or calc();
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

/* Keyword values */
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

/*  values */
mask-position: 25% 75%;

/*  values */
mask-position: 0px 0px;
mask-position: 1cm 2cm;
mask-position: 10ch 8em;

/* Multiple values */
mask-position: 0px 0px, center;

/* Global values */
mask-position: inherit;
mask-position: initial;
mask-position: unset;

Values

<position>

Is a <position>, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

Formal syntax

<position>#
where 
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
where 
<length-percentage> = <length> | <percentage>

Example

.exampleOne {
  mask-image: url(mask.png);
  mask-position: bottom right;
}

.exampleTwo {
  mask-image: url(mask.png);
  mask-position: 25%;
} 

Specifications

Specification	Status	Comment
CSS Masking Level 1 The definition of 'mask-position' in that specification.	Candidate Recommendation	Initial definition

Browser compatibility

[1] Gecko currently doesn't implement this feature. It is only available in Nightly and Dev Edition. See bug 1251161.