CSS mask-position Property


The mask-position property uses the percent or keywords values to set the mask images within the mask positioning area. There are always two mask-position values. If only one value is specified, the other is assumed to be 50% or center.

Syntax

Example

Preview

Property Values

Value Description
left top  
left center  
left bottom  
right top  
right center  
right bottom  
center top  
center center  
center bottom  
 
If you only specify one keyword, the default value is "center."
x% y% The first value represents the horizontal position, and the second represents the vertical position. The top left corner has a value of 0% 0%. The bottom right corner is 100 percent 100 percent. If you only enter one value, the other value will be 50%. 0 percent 0 percent is the default value.
xpos ypos The first value represents the horizontal position, and the second represents the vertical position. The top left corner has a value of 0 0. Pixels (0px 0px) or any other CSS unit can be used as units. If you only enter one value, the other value will be 50%. You can combine percentages and positions.
initial This property is set to its default value.
inherit This property is inherited from its parent element.

Supported Browsers

Property Chrome Firefox Safari Edge / IE Opera