-moz-background-clip:text does not work in Firefox

I'm trying to fill in the content of a text in a h1 tag by an image. Following my understanding ;-), I'm doing the following in the html:

<div class="image_clip">
 <h1>
  MY WONDERFULL TEXT
 </h1>
</div>

And in the css file:

.image_clip{
 background: url(../images/default.png) repeat;
 -moz-background-clip: text;
 -moz-text-fill-color: transparent;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

The fact is that it does not yield the expected result... that is the text with the image in it as color. The image is displayed on the entire background of the div and not only behind the text. The text itself is moreover still in black.

I'm trying that on Firefox. Don't have other browsers.

Did I missed something?

Tks for the help.

Whilst -webkit-background-clip:text exists, -moz-background-clip:text does not, so you won’t be able to achieve your clipping effect in Firefox. (Unless there’s another way I can’t think of.)

Neither does -moz-text-fill-color, although you could just use color:transparent, as long as the element doesn’t have anything else (e.g. borders, -wekbit-text-stroke) that you want to be visible.

Your code does work in Chrome and Safari:

• http://jsfiddle.net/7T8am/2/

However, the <h1>’s text does need to be transparent, so if any other CSS code is setting a colour for the <h1>, you’ll need to override it.

Per the standard, the background-clip property (which is implemented without a prefix in Firefox, by the way), doesn't have text value. You're using a proprietary WebKit feature, not a standard CSS property....

You are applying the style to the enclosing div, not the h1 tag. Try changing your selector to be .image_clip h1 {your:styles;}, or alternatively you can leave your CSS the same and apply the class to the h1 with <h1 class="image_clip"></h1>.

To get background-clip:text to give the anticipated appearance in Firefox you could use this polyfill - https://github.com/TimPietrusky/background-clip-text-polyfill - that replaces the CSS with an SVG version in non Webkit browsers. [untested but seen working]