-webkit-mask-position

Summary

The -webkit-mask-position CSS property sets the initial position of a mask image.

Syntax

<mask-position>[, <mask-position>]*
where 
<mask-position> = [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top  | center | bottom ]?

Values

Accepts one or two values. Negative <percentage> and {{ cssxref }} values are allowed.

• If only one value is specified, the second value is assumed to be center.
• The first value represents the horizontal position and the second represents the vertical position (if at least one value is not a keyword).

<percentage>

With a value pair of 0% 0%, (is equal to 0 0) the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of 100% 100% places the lower right corner of the image in the lower right corner of padding area. With a value pair of 14% 84%, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.

<length>

With a value pair of 2cm 1cm, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding area.

top

Equivalent to 0% for the vertical position.

right

Equivalent to 100% for the horizontal position.

bottom

Equivalent to 100% for the vertical position.

left

Equivalent to 0% for the horizontal position.

center

Equivalent to 50% for the horizontal position if it is not otherwise given, or 50% for the vertical position if it is.

Examples

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

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

Specifications

Not part of any specification.

Browser compatibility

See also

-webkit-mask-origin, -webkit-mask-box-image, -webkit-mask-attachment, -webkit-mask-clip, -webkit-mask-image, -webkit-mask-composite, -webkit-mask-repeat