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> | autowhere <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 compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 1 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 4 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.'
- Non-standard. Expect poor cross-browser support.
See also
-moz-image-region by Mozilla Contributors is licensed under CC-BY-SA 2.5.