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

Question

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.

Answer 1

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.