Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    -webkit-mask-position

    Non-standard
    This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

    Summary

    The -webkit-mask-position property sets the initial position of a mask image.

    Syntax

    -webkit-mask-position:  <mask-position>[, <mask-position>]*
    -webkit-mask-position:  [ <percentage> | <length> | left | center | right  ] 
                            [ <percentage> | <length> | top  | center | bottom ]?
    

    Where:

    <mask-position> is one of:
    [ <percentage>| <length>| left | center | right  ]
    [ <percentage> | <length> | top  | center | bottom ]?

    Values

    Accepts one or two values. Negative <percentage> and <length> values are allowed.

    • If only one value is specified, the second value is assumed to be center.
    • The first value represents the horizontal position and the second represents the vertical position (if at least one value is not a keyword).
    <percentage>
    With a value pair of 0% 0%, (is equal to 0 0) the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of 100% 100% places the lower right corner of the image in the lower right corner of padding area. With a value pair of 14% 84%, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
    <length>
    With a value pair of 2cm 1cm, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding area.
    top
    Equivalent to 0% for the vertical position.
    right
    Equivalent to 100% for the horizontal position.
    bottom
    Equivalent to 100% for the vertical position.
    left
    Equivalent to 0% for the horizontal position.
    center
    Equivalent to 50% for the horizontal position if it is not otherwise given, or 50% for the vertical position if it is.

    Examples

    .exampleOne {
    	-webkit-mask-image: url(mask.png);
    	-webkit-mask-position: bottom right;
    }
    
    .exampleTwo {
    	-webkit-mask-image: url(mask.png);
    	-webkit-mask-position: 25%;
    } 
    

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 1.0 Not supported Not supported Not supported 4.0
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? Not supported Not supported Not supported ?

    See also

    -webkit-mask-origin, -webkit-mask-box-image, -webkit-mask-attachment,-webkit-mask-clip-webkit-mask-image,-webkit-mask-composite,-webkit-mask-repeat

    Document Tags and Contributors

    Tags: 
    Contributors to this page: barlow, Sheppy, velvel53, teoli
    Last updated by: velvel53,
    Hide Sidebar