element()
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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.
A particularly useful scenario for using this would be to render an image in an HTML <canvas> element, then use that as a background.
On Gecko browsers, you can use the non-standard document.mozSetImageElement() method to change the element being used as the background for a given CSS background element.
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 | | | |
- This browser only partially implements this feature
- This feature was removed in a later browser version (57)
- This feature was removed in a later browser version (29)
- Available with a vendor prefix: -moz- (29)
- Available with a vendor prefix: -moz- (4)
- `-moz-element()` is limited to `background-image`, `background`, `border-image` and `border-image-source`.
- `-moz-element()` is limited to `background-image` and `background`.
Syntax
/* Firefox only (with -moz- prefix) */
.preview {
background: -moz-element(#source);
background-size: contain;
}Live demo
Use cases
-
Using element()
Experimental: This is an experimental technology
Cautions
- Limited browser support. Check compatibility before use.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.