12

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.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
microcosme
  • 703
  • 1
  • 5
  • 22
  • Following http://www.w3schools.com/cssref/css3_pr_background-clip.asp 'text' is not supported as a value of 'background-clip'. Where did you find that 'background-clip: text' connection? – MarcinJuraszek Feb 20 '12 at 14:24
  • @MarcinJuraszek here: http://www.webkit.org/blog/164/background-clip-text/ – Stefan Paul Noack Feb 20 '12 at 14:28
  • `-webkit-background-clip:text` exists, but `-moz-background-clip:text` does not; see https://developer.mozilla.org/en/CSS/-moz-background-clip – Paul D. Waite Feb 20 '12 at 14:52

4 Answers4

10

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:

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.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • Paul is right, and the Fiddle shows OP's markup working correctly in Chrome for me. – Ryan Feb 20 '12 at 15:51
  • 1
    I know this post is 10 years old, however, at least in firefox 100, ``-webkit-background-clip: text`` is supported and works. – SimpleCoder Jun 01 '22 at 19:21
4

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

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
1

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]

pbhj
  • 276
  • 3
  • 15
1

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

Ryan
  • 2,433
  • 5
  • 31
  • 41