CSS mask-position property

Property values

X-percentage Y-percentageDefault

0

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%;

Try it { }

X-percentage Y-percentage

70

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%;

Try it { }

XY-percentage

30

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

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

mask-position: 30%;

Try it { }

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;

Try it { }

center

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

It computes to center center or 50% 50%.

mask-position: center;

Try it { }

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;

Try it { }

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;

Try it { }

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;

Try it { }