The mask-position property
The mask-position property sets the initial position of the mask relative to the element.
Works similarly to background-position, but applies to masks.
Syntax
selector {
mask-position: <position>;
}
Values
| Value | Description |
|---|---|
top left |
Top left corner (default). |
center |
Center of the element. |
50% 50% |
Same as center. |
right bottom |
Bottom right corner. |
100px 200px |
Specific pixel coordinates. |
Example . Centering the mask
Heart mask centered on the image:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Example . Top left corner
Mask in the top left corner:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Example . Bottom right corner
Mask in the bottom right corner:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Example . Exact coordinates
Mask positioned using exact coordinates:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Example . Percentage positioning
Positioning the mask using percentages:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
See also
-
property
mask-size,
defines the mask size -
property
mask-origin,
defines the reference point for positioning -
property
mask,
shorthand for all masking properties
