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-1.png

Recent Features

  • 5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • 5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • Sexy Album Art with MooTools or jQuery

    The way that album information displays is usually insanely boring. Music is supposed to be fun and moving, right? Luckily MooTools and jQuery allow us to communicate that creativity on the web. The XHTML A few structure DIVs and the album information. The CSS The CSS...

  • Table Cell and Position Absolute

    If you follow me on Twitter, you saw me rage about trying to make position: absolute work within a TD element or display: table-cell element.  Chrome?  Check.  Internet Explorer?  Check.  Firefox?  Ugh, FML.  I tinkered in the console...and cussed.  I did some researched...and I...

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!