Code and Stuff

May 17, 2012

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


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

No comments: