O'Reilly

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!

Track.js Error Reporting

Recent Features

  • Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

Incredible Demos

  • CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome,...

  • Introducing LazyLoad 2.0

    While improvements in browsers means more cool APIs for us to play with, it also means we need to maintain existing code.  With Firefox 4's release came news that my MooTools LazyLoad plugin was not intercepting image loading -- the images were loading regardless of...

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?

  15. Isuru Ranawaka

    This is pretty awesome! =) I tried selecting text on the repeated element, and the selection is visible on the bigger block in background.

  16. Iman

    Too bad that we don’t have the same thing on Chrome, I had an idea…

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

Recently on David Walsh Blog

  • Serve a Directory via Python

    Sometimes I'm working with a test HTML file and some JavaScript but need to work off of a served space.  In that case, I sometimes need to swap out folders within MAMP Stack which leads to a maintenance nightmare.  Bleh. I recently found out that you can...

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...