Be my background element()
In Firefox 4, Mozilla introduced an extension to
this function you can use any element as a background for another image. You might think what's the big
deal, but think about the followin use-case for a minute. You are working on this killer slideshow web-aplication where
you want each slide to be built in HTML and you want to create previews of every slide. Until recently that would've been
a very hard job, but with
-moz-element() it's easy as pie.
Warning these example will only work in Firefox at the moment.
How does it work?
The concept is very simple. First you give the element you want to use as a background an id. Then all you have to
do is setting
background-image: -moz-element(#id); to the element you want to have the background. All
other properties like
background-repeat work as you expect them to.
- You cannot create "circular" backgrounds (the same element or it's childern cannot be backgrounds for themselves).
- The element must be visible (with the exception of canvases, images and videos), but you can wrap your background in
another element with
height: 0; overflow: hidden;which has more or less the same effect.
- As said before: Firefox only at the moment (it is however part of the CSS Image Values and Replaced Content Module Level 3)
Show us the source!
Feel free to look around the different source files we used for this example.