This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



This property sets the initial position of a mask image. Position can be specified in terms of percentages of the distance from upper left corner (original point) or using the keywords top, left, center, right, or bottom, similar to the CSS background-position property.

Overview table

Initial value
Applies to
All elements. In SVG, it applies to container elements without the <defs> element and all graphics elements.
Computed value
Two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.

CSS Object Model Property

Refer to size of mask painting area minus size of mask image.


  • mask-position: length length
  • mask-position: percentage percentage
  • mask-position: percentage
  • mask-position: bottom length right length
  • mask-position: left top


length length
Any standard CSS units are acceptable as mask-position values: px, ems, rems, mm, cm etc. Note that unit values specify the distance the top left corner of the mask is away from the top left corner of the element. For more details on these units, read Length units.
percentage percentage
Percentages are acceptable for mask-position values, and specify percentages of the overall width and height of the element in question. Note that percentage values specify the distance the top left corner of the mask is away from the top left corner of the element.
left top
mask-position can also be expressed as keywords: left top, top, right top, left, center, right, left bottom, bottom, right bottom. These values do not relate specifically to the position of the top left hand corner of the mask, but rather the overall position of the mask inside the element. So for example, a value of right top will make the right and top sides of the mask flush to the top and right sides of the element it is applied to; the top left corner won’t be positioned at the top right of the element!
If only a single value is included, that is taken as the horizontal value, and the vertical value is set as center.
bottom length right length
CSS3 includes the new four value mask-position syntax, which allows you to choose which sides of the element you are positioning the mask relative to (values 1 and 3), and then the distance away from those sides (values 2 and 4). So this example says that you want to position the mask 10 pixels from the bottom of the element, and 15 pixels from the right. If you miss out one of the offset values, the other is assumed to be 0.


/* bottom right */
body {
    background-color: white;
    mask-image: url(big-black-dot.jpg);
        mask-position: bottom right;
    mask-repeat: no-repeat;

Related specifications

CSS Masking Level 1
W3C Editor’s Draft