Using elements as background images with -moz-element

Translation of the article “Use Elements as Background Images with -moz-element” by David Walsh

We all know that all browser vendors define many CSS and JavaScript features in their own way, and I am grateful for that. Mozilla and WebKit offer their interesting proprietary properties, and although, as we know, standards are approved for years, much longer than they cost, we should all be grateful for that. There is one interesting CSS property you probably haven’t heard about yet - -moz-element , this is a Mozill-implemented CSS property that allows developers to use HTML elements as backgrounds for other elements!

Watch the demo

HTML and CSS

Suppose that an HTML element exists within the current page and has a style set. The element has CSS gradient, text and several 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 set the styles inside the element attribute, but the -moz-element works with the styles specified in the style tags or external style sheets. Now, having an element on our page, we can use it as a “background” for another element:

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

Assigning an element's ID to the -moz-element property theoretically turns an element into a background image, allowing you to apply background-repeat and everything else. Also note that the element is updated when the style and content of the background element is updated, so that you work with a “live” background!

Watch the demo

Awesome CSS property, isn't it? The ability to use an existing HTML element as a CSS background is simply amazing, but thanks to Mozilla, this is completely possible. Are you thinking about the real use of this property? The advantage that I see in -moz-element is that you can include text in the background, and you can also use elements generated by external scripts (social bookmarking scripts, for example). What is this interesting implementation!