-moz-image-region

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.

For certain XUL elements and pseudo-elements that use an image from the list-style-image property, this property specifies a region of the image that is used in place of the whole image. This allows elements to use different pieces of the same image to improve performance.

/* Keyword value */
-moz-image-region: auto;
/* <shape> value */
-moz-image-region: rect(0, 8px, 4px, 4px);
/* Global values */
-moz-image-region: inherit;
-moz-image-region: initial;
-moz-image-region: unset;

The syntax is similar to the clip property. All four values are relative to the upper left corner of the image.

Initial value	`auto`
Applies to	XUL `<image>` elements and `:-moz-tree-image`, `:-moz-tree-twisty`, and `:-moz-tree-checkbox` pseudo-elements. Note: `-moz-image-region` only works with `<image>` elements where the icon is specified using `list-style-image`. It will not work with XUL `<image src="url" />`.
Inherited	yes
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Note: For a system that works on any background, see -moz-image-rect().

Syntax

Values

auto: Automatically defines the region of the image to use.
<shape>: A shape defining the part of the image to use. The rect() function defines a rectangle to use as shape. Its parameters define the top, right, bottom, and left offsets of the edges of the image, in this order.

Formal syntax

<shape> | autowhere 
<shape> = rect(<top>, <right>, <bottom>, <left>)

Examples

#example-button {
  /* display only the 4x4 area from the top left of this image */
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /* use the 4x4 area to the right of the first for the hovered button */
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}

Specifications

Not part of any specification.

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	No support	No support	(Yes)-moz	No support	No support	No support

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	No support	No support	(Yes)-moz	No support	No support	No support