CSS mask-position property

Property values

X-percentage Y-percentageDefault

Horizontal offset is 0% which means 0% width of the image is under 0% width of the mask positioning area from the left side.

Vertical offset is 0% which means that 0% height of the image is under 70% height of the mask position area from the top side.

mask-position: 0% 0%;

X-percentage Y-percentage

Horizontal offset is 40% which means 40% width of the image is under 40% width of the mask positioning area from the left side.

Vertical offset is 70% which means that 70% height of the image is under 70% height of the mask position area from the top side.

mask-position: 40% 70%;

XY-percentage

One value is 30%. The other value is 50% (by default).

It is the same as mask-position: 30% 50%;.

mask-position: 30%;

left

The image is aligned on the left side horizontally. And it is aligned at the center vertically (by default).

It is the same as left center or 0% 50%.

mask-position: left;

center

This value aligns an image horizontally and vertically at the center.

It computes to center center or 50% 50%.

mask-position: center;

right

This value aligns an image horizontally on the right side and vertically at the center.

It is the same as right center or 100% 50%

mask-position: right;

top

top value aligns an image horizontally at the center and vertically at the top.

It is the same as center top or 50% 0%.

mask-position: top;

bottom

bottom value aligns an image horizontally at the bottom and vertically at the bottom.

It is the same as center bottom or 50% 100%.

mask-position: bottom;