HTML5 and CSS3 Advent 2011

Be my background element()

In Firefox 4, Mozilla introduced an extension to background-image called -moz-element(). With 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.

Examples

Warning these example will only work in Firefox at the moment.

  • What is it?
    With the element() function you can use any element as a background.
  • What's the syntax?
    background-image: element(#id);
    is all you need
  • What's the catch?
    Currently only works in Firefox.
Slide previews with -moz-element()

Background element

Element to receive background

And this is the element we apply the background to.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

What it should look like

Screenshot of the effect above
Simple example

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-size, background-repeat work as you expect them to.

Some caveats

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

Check out our all new HTML & CSS Advent 2012