CSS - mask-position Property

Quiz

CSS mask-position property is used to specify the positioning of a mask image within an element. The mask image is typically defined using the mask-image property, and mask-position allows you to control where the mask image is placed within the element's box, relative to the mask position layer set by mask-origin property.

Syntax

mask-position: top | right | bottom | left | center | length | percentage | initial | inherit;

Property Values

Value	Description
left top left center left bottom right top right center right bottom center top center center center bottom	The position of the mask is set using the keywords: left, right, top, bottom, center. If single value is provided, the other value is center.
length (xpos, ypos)	The first value sets the horizontal distance and second value sets the vertical distance. Top left top corner is 0 0 . Any length units can be used (e.g. px, em, rem etc.). If single value is provided the other value is 50%.
percentage (x%, y%)	The first value sets the horizontal distance and second value sets the vertical distance. Top left top corner is 0% 0% and right bottom corner is 100% 100%. If single value is provided the other value is 50%. Default: 0% 0%
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Mask Position Property

The following examples explain the mask-position property with different values.

Mask Position Property with Keyword Values

To set the position of the mask, we can use the keyword values: left, right, top, center and bottom. Upto two values are accepted. If two values are specified, the first value sets the horizontal distance and the second value sets the vertical distance. If single value is given, the other value is taken as center. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 400px;
         width: 450px;
      }

      .mask {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-size: 50%;
         mask-repeat: no-repeat;

      }

      .ex1 {
         mask-position: left center;
      }

      .ex2 {
         mask-position: center;
      }

      .ex3 {
         mask-position: right top;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-position Property
   </h2>
   <h4>
      mask-position: left center (two values- define x 
      position and y position repectively)
   </h4>
   <div class="container">
      <div class="mask ex1">
         <img src="/css/images/scenery.jpg" 
         alt="img" width="600" height="400">
      </div>
   </div>
   <h4>
      mask-position: center (single value, the 
      second value is also center)
   </h4>
   <div class="container">
      <div class="mask ex2">
         <img src="/css/images/scenery.jpg" 
         alt="img" width="600" height="400">
      </div>
   </div>
   <h4>
      mask-position: right top (two values- define x 
      position and y position repectively)
   </h4>
   <div class="container">
      <div class="mask ex3">
         <img src="/css/images/scenery.jpg" 
         alt="img" width="600" height="400">
      </div>
   </div>

</body>

</html>

Mask Position Property with Length Values

To set the position of a mask, we can specify the position using length units (e.g. px, em, rem etc.). Upto two values are accepted. If two values are specified, the first value sets the horizontal distance and the second value sets the vertical distance. If single value is given, the other value is taken as 50%. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 400px;
         width: 450px;
      }

      .mask {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-size: 50%;
         mask-repeat: no-repeat;

      }

      .ex1 {
         mask-position: 70px 90px;
      }

      .ex2 {
         mask-position: 7em 14em;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-position Property
   </h2>
   <h4>
      mask-position: 70px 90px (70px from left 
      edge and 90px from top edge)
   </h4>
   <div class="container">
      <div class="mask ex1">
         <img src="/css/images/scenery.jpg" 
         alt="img" width="600" height="400">
      </div>
   </div>
   <h4>
      mask-position: 7em 14em (7em from the left 
      edge and 14em from top edge)
   </h4>
   <div class="container">
      <div class="mask ex2">
         <img src="/css/images/scenery.jpg" 
         alt="img" width="600" height="400">
      </div>
   </div>

</body>

</html>

Mask Position Property with Percentage Values

To set the position of a mask, we can specify the position using percentage values (e.g. 10%) relative to the size of the container. Upto two values are accepted. If two values are specified, the first value sets the horizontal distance and the second value sets the vertical distance. If single value is given, the other value is taken as 50%. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 400px;
         width: 450px;
      }

      .mask {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-size: 50%;
         mask-repeat: no-repeat;

      }

      .ex1 {
         mask-position: 70% 30%;
      }

      .ex2 {
         mask-position: 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-position Property
   </h2>
   <h4>
      mask-position: 70% 30% (70% from left edge and 30% from 
      the top edge relative to the container height and width)
   </h4>
   <div class="container">
      <div class="mask ex1">
         <img src="/css/images/scenery.jpg" 
         alt="img" width="600" height="400">
      </div>
   </div>
   <h4>
      mask-position: 50% ( second value is also 50%, 50% from
      the left edge and 50% from the top edge relative to the 
      container height and width)
   </h4>
   <div class="container">
      <div class="mask ex2">
         <img src="/css/images/scenery.jpg" 
         alt="img" width="600" height="400">
      </div>
   </div>

</body>

</html>

Supported Browsers

Property
mask-position	120	120	53	15.4	106

css_reference.htm

Print Page