mask-position

The mask-position property designates the starting position – relative to the mask position area – of a mask image.

Syntax

A mask image is placed at the top left corner and repeated both vertically and horizontally by default.

div.ex { 
  mask-image: url(path-to-image.jpg); 
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 80%; 
}

Values

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
If only one keyword is given, the other value will be center.

x% y%
Default value is 0% 0%. First value is the horizontal position and second value is the vertical position. Top left corner is 0% 0%. Right bottom corner is 100% 100%. If only one value is designated the other value will be 50%.

xpos ypos
First value is the horizontal position and second value is the vertical position. Top left corner is 0 0. If only one value is designated the other value will be 50%. % and positions can be mixed.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of mask-position? Submit a codepen.io demo and we'll showcase it here ↴