CSS3 element background

When posted, the element image worked only with firefox using -moz-element.

 

This is done with the css element image. This allows you to use a DOM element as the background of another.

How to

the whole magic is done by the element() image type. When specifying the background image of an element simply use -moz-element(#id) where id points to the element to be used as image.

Here an example. Given following HTML code:

<div id="one">I wouldn't steal a car, but I would download it</div>
<div id="two"></div>

we can place an image of the tag #one as background of tag #two with the following CSS:

#two {
   background-image: -moz-element(#one);
   height: 40px;
}

Some tests

Recursion

Recursion does not work on the same element, but an element image of the container of another element image does:

It gets even more interesting when having two mutually recursive backgrounds:

This is div #1

This is div #2

Try to select the word "This".

Animations

What about gifs:

Flash plugin however will not work.

Hidden elements

The image is generated also when the element is not visible because covered by other elements. Below we have a text that is covered by some other text.

This is the hidden text

some other text

Lets try to get the element hidden behind "some other text".