Use Elements as Background Images with -moz-element

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!

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:

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!

Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Two years ago I documented my struggles with Imposter Syndrome and the response was immense. I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions. I've even caught myself reading the post...

The jQuery homepage has a pretty suave tooltip-like effect as seen below:
Here's how to accomplish this same effect using Dojo.
The XHTML
The above HTML was taken directly from the jQuery homepage -- no changes.
The CSS
The above CSS has been slightly modified to match the CSS rules already...

I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I'll use the exact same CSS and HTML as yesterday.
The XHTML
The CSS
The jQuery JavaScript
On the keypress and blur events, we validate and...

Discussion

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

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

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…

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 :-)

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!

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

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!

Andree

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

Continue this conversation via emailGet only replies to your comment, the best of the rest, as well as a daily recap of all comments on this post. No more than a few emails daily, which you can reply to/unsubscribe from directly from your inbox.