Use Elements as Background Images with -moz-element

We all know that each browser vendor takes the liberty of implementing their own CSS and JavaScript features, and I'm thankful for that. Mozilla and WebKit have come out with some interesting proprietary CSS properties, and since we all know that cementing standards takes ages more than it should, we should all be thankful. One interesting CSS property you probably haven't heard of is -moz-element, a Mozilla-implemented CSS property that allows developers to use HTML elements as an element background!

The HTML and CSS

Let's assume that an HTML element exists within the current page, and it's style however a background should be. It has a CSS gradient, text, and numerous CSS properties:

<div id="mozElementBack" style="border:1px solid #999;width: 200px; height: 100px; color: #fff; background: -moz-linear-gradient(top, #063053, #395873, #5c7c99);">
	I'm in the background.  
</div>

I've inlined the styles on the element, but -moz-element will work with styles declared in style tags or external stylesheets. With the element existing within our page, we can now use it as a "background" for another element:

#mySpecialElement {
	/* mozElementBack exists as an element within the page */
	-moz-element(#mozElementBack) repeat;
}

Simply setting the -moz-element to the element ID, theoretically, converts the given element to a background image, allowing for background-repeat capabilities, and so on. Also note that the background updates as the element content and style updates, so you're working with a "live" background!

An incredible CSS property, no? The ability to use an existing HTML element as a CSS background is wild, but thanks to Mozilla, it's entirely possible. Let me know if you can think of a great, real-life usage of this property. The advantage I see in -moz-element is that you can include text in backgrounds, as well as elements generated from scripts you don't control (social bookmarking JS files, for example). What an interesting implementation though!