The mask-position property specifies the initial position (after any resizing) of a mask layer image within the mask positioning area.
Trivia & Notes
The mask-position property works and takes the same values as the background-position property.
Official Syntax
-
Syntax:
mask-position: <position>#
- Initial: center
- Applies To: All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements
- Animatable: as repeatable list of simple list of length, percentage, or calc
Notes
The hash tag (#) indicates that the property takes any number of mask positions. The list of mask positions is comma-separated.
When the mask-position property takes a list of comma-separated values, each value is applied to a corresponding mask layer image specified in the mask-image property (first value for the first image, second value for the second image, and so on).
Values
- <position>
-
Specifies the position of the mask inside the mask positioning area.
A
<position>can be defined by using offset keywords (top,left,bottom,right, andcenter), or relative <percentage> and <length> offset values.
These values describe the position of the element relative to its container’s edges (top edge and left edge).Please refer to the
<position>entry for more information and a list of possible<position>values.
Examples
The following example sets the position of two mask layer images. The position is applied after each image is sized using the mask-size property.
img {
mask-image: url(first-mask.png), url(second-mask.png);
mask-position: top left, bottom right;
mask-size: 250px 250px, 300px, 200px;
}
Live Demo
The mask position in the following demo has been set to top left. Try changing the value of the mask-position property to see how the mask position changes, therefore changing the portion of the image that shows through it.
Browser Support
CSS Masks
Method of displaying part of an element, using a selected image as a mask
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 120
- 53
- No
- 106
- 15
Mobile / Tablet
- 15
- 131
- No
- 131
- 132
Notes
This module, as you can see in the support table above, hasn’t been fully implemented in all browsers, so you’re probably not going to be able to use all features even in browsers that have implemented certain properties (for the time being).
In the meantime, you can check out this open source feature support table by Alan Greenblatt on GitHub. The purpose of this table is to provide some insight into what the current state of affairs is with various browser implementations of CSS Clipping and Masking features.
