Treehouse

Use Elements as Background Images with -moz-element

By on  

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 */
	background: -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!

ydkjs-3.png

Recent Features

  • Introducing MooTools&nbsp;Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • CSS&nbsp;@supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • MooTools Zebra Tables&nbsp;Plugin

    Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors. The CSS The above CSS is extremely basic....

  • Dijit&#8217;s TabContainer Layout:  Easy Tabbed&nbsp;Content

    One of Dojo's major advantages over other JavaScript toolkits is its Dijit library.  Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates.  One very useful layout class is the TabContainer.  TabContainer allows you to quickly create a tabbed content...

Discussion

  1. Lorenzo

    You say you are thankful to Mozilla and WebKit for their interesting proprietary CSS properties. Ok, when we talk about CSS3 non-standard-yet properties I agree. But there are lot of these feature that are not part of W3 specifications, or only drafts (that’s the case of this element() function). So, completly vendor-specific features. What does this suggest to us? http://en.wikipedia.org/wiki/Browser_wars#Consequences

  2. “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”

    Well said that man!

    Careful though or Lea Verou and the standards Stalinists will eye you for internment in the cyber archipelago.

    I see one of them above has already been taking notes

  3. I think element() would be quite useful for creating watermarks, as demo’d in this dabblet from a few weeks ago:

    http://dabblet.com/gist/1729950

  4. Cool. but is it fully cross browser?

    • Rolf

      doh! did you read the intro of the post?

  5. Rolf

    like from red alert… affirmative!

  6. David O'Sullivan

    What is actually pretty mind bogglingly useful is the fact that you can use the background-size property in conjunction with this. This means that you can make responsive layouts, where the text also scales. So you can recreate the effects of ctrl +/- like zooming in and out. It would be AMAZING if this was at least iOS compatible…

  7. I love this post. Great job. I hope to see more. Thanks for sharing with us.

  8. That’s a pretty cool idea. I could think of a few uses, mainly for aesthetics e.g. video as backgrounds etc.

    It’s kinda weird though, i notice (at least on Fx nightly) that when I highlight text in the source -moz-element, the background copies text is also selected – could be handy but it’s a bit freaky :-)

  9. iSimon

    Is there a way to tell “use the current element as background”? I’m thinking about box reflection using “:after” pseudo-class and this awesome “element()” feature!

  10. DrCLue

    Sometimes the cute little vendor prefixes can indeed be useful if one can find the right ones.

    For a lot of folks all them little vendor cufflinks (-Khtml -Ms -O -Moz -Webkit -Web-Kit -atsc -wap -mso) are a pain, but long before this big tidal wave of them , I had discovered the div.style['foo'] test for undefined and “”, and simply added the fairly trivial few lines of code that lets me pretend for the most part that they don’t exist so I can just author my W3C valid pages prefix free and the css in my pages and files just adapt themselves on the fly even before document.readyState gets to it’s 4th state “complete”.

    All this stuff just makes for interesting opportunities. In many circles one sorta sees this rivalry between the differing technical and artistic camps, but the game is as it’s been all along , coming up with clever ways to turn the chaos into the well mannered servant and performer that keeps the users clicking .

    Even jQuery here has been house broken and no longer leaves little piles of plugin initialization code here and there as the css classes now trigger the loading and configuration here it not so much a line of that stuff needed.

    I still remember when anyone hearing the word “Internet” would 99% of the time say “The inter-what?”

    So now , I and hopefully a few of those -moz- cufflinks will sit down and codger up a convincing range (slider) control for moz so it too can spin
    those 3D egyptian pyramids made out of those CSS triangles I’ve managed to sneak the brick texturing onto.

    It’s still as much fun today to tame and train the the technical critters as it was in the days before Apple and Microsoft came along

  11. I used this to create a Windows Aero/iOS7 effect in FX: http://jsfiddle.net/KeithHenry/RgBzH/1/

    I can’t get anything like it to work in any other browser though, so here’s hoping element becomes part of the spec.

  12. It fun but verrrrrrrrrrrrrrrrrrrry slow checkout this cover flow effect demo: https://github.com/amirouche/nova-tunes (only master branch use -moz-element, I removed it in the gh-pages branch because it’s way too slow).

    Keep it steady!

  13. Andree

    Like Keith, I used -moz-element to create an iOS7-Effect. Here is a draggable Version.

    http://jsfiddle.net/aL5zD/

  14. ori

    Any security concerns?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!