element()
Quick Summary for element()
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Code Usage for element()
element(id) 
More Details for element()

element()

Experimental: 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 work 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!".

Page Preview

This example based on Vincent De Oliveira's creates a preview of the <div id="css-source"> inside <div id="css-result">.

HTML
<div id="css-source">     <h1>Page Preview</h1> </div> <div id="css-result"> </div> 
CSS
#css-result {     background: -moz-element(#css-source) no-repeat;     width: 256px;     height: 32px;     background-size: 80%;     border: dashed; } 
Result

Specifications

Specification
CSS Image Values and Replaced Content Module Level 4 # element-notation

See also

image() image-set() <image> <gradient> element() cross-fade() document.mozSetImageElement()

Last modified: Feb 9, 2022, by MDN contributors

Select your preferred language English (US)Français日本語Português (do Brasil)中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
“If you just sit and observe, you will see how restless your mind is. If you try to calm it, it only makes it worse, but over time it does calm, and when it does, there’s room to hear more subtle things. You see so much more than you could see before. It’s a discipline; you have to practice it.”
Steve Jobs
Random CSS Property

block-size

The block-size CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the width or the height property, depending on the value of writing-mode.
block-size css reference