W3cubDocs

/CSS

-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.

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 definition

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
Computed value as specified
Animation type discrete

Formal syntax

<shape> | auto

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

Examples

Clipping an image

#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 standard.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
-moz-image-region No No 1 No No No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
-moz-image-region No No 4 No No No

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-image-region