Using elements as background images with -moz-element

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

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

Watch the demo

HTML and CSS

Suppose that an HTML element exists inside the current page and has a style set. An element has a CSS gradient, text, and several CSS properties:

	I'm in the background.  

I set styles inside the element attribute, but -moz-element also works with styles specified in 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 ID to a property -moz-element, theoretically, turns the 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 contents of the background element are updated, so that you are working with a live background!

Watch the demo

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