element()
The element() CSS function creates a live-updating image from an HTML element that can be used as an image or background image.
Overview
The element() CSS function creates a live-updating image from an HTML element that can be used as an image or background image.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.background-image.element Experimental | | | 4 | | | |
| CSS type | ||||||
element Experimental The element() CSS function defines an image value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated. | | | 57 | | | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 7 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (57)
- This feature was removed in a later browser version (29)
Compatibility
- Available with a vendor prefix: -moz- (29)
- Available with a vendor prefix: -moz- (4)
Implementation note
- `-moz-element()` is limited to `background-image`, `background`, `border-image` and `border-image-source`.
- `-moz-element()` is limited to `background-image` and `background`.
Syntax
CSS
/* Firefox only (with -moz- prefix) */
.preview {
background: -moz-element(#source);
background-size: contain;
}Live demo
Use cases
Using element()
The element() CSS function creates a live-updating image from an HTML element that can be used as an image or background image.
Cautions
- Limited browser support. Check compatibility before use.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features