Web/CSS/element()

This is an experimental technologyCheck 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.

Syntax

element(id)

where:

id: The ID of an element to use as the background, specified using the HTML attribute #id on the element.

Examples

These examples can be viewed live in builds of Firefox that support -moz-element().

A somewhat realistic example

This example uses a hidden <div> as a background. The background element uses a gradient, but also includes text that is rendered as part of the background.

<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
  <p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
  </div>
</div>

The <div> element with the ID "myBackground1" is used as the background for the content including the paragraph "This box uses the element with the #myBackground1 ID as its background!".

[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3105/1399121a207845cb394b98c1b4409cd8/example1.png|class=default internal|example1.png]]

A somewhat more bizarre example

This example uses a hidden <button> element in a repeating pattern as its background. This demonstrates that you can use arbitrary elements as background, but doesn't necessarily demonstrate good design practices.

<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
</div>

<div style="overflow:hidden; height:0;">
  <button id="myBackground2" type="button">Evil button!</button>
</div>

[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3106/6f6f6f25133048850d2d8b202aa227b8/example2.png|class=default internal|example2.png]]

Specifications

Specification	Status	Comment
CSS Images Module Level 4The definition of 'Using Elements as Images: the element() notation' in that specification.	Working Draft	Deferred from CSS3 Images.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`element()` Experimental'	Chrome No support No	Edge No support No	Firefox Full support 57 Prefixed' Full support 57 Prefixed' Prefixed' Implemented with the vendor prefix: -moz- No support 29 — 57 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -moz- Notes' `-moz-element()` is limited to `background-image`, `background`, `border-image` and `border-image-source`. No support 4 — 29 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -moz- Notes' `-moz-element()` is limited to `background-image` and `background`.	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 60 Prefixed' Full support 60 Prefixed' Prefixed' Implemented with the vendor prefix: -moz- No support 29 — 60 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -moz- Notes' `-moz-element()` is limited to `background-image`, `background`, `border-image` and `border-image-source`. No support 4 — 29 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -moz- Notes' `-moz-element()` is limited to `background-image` and `background`.	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
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
See implementation notes.': See implementation notes.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.