CSS3 background-clip

Question

I'm using -webkit-background-clip to restrict a background image to the text in an h2 element.

My question is, does -moz-background-clip function the same way? This only seems to work in webkit browsers, which suggests it doesn't work yet in Firefox:

#header h1 a{
    background: url(img/logo-overlay.png) no-repeat #000;
    -moz-background-clip: text; -webkit-background-clip: text;
    color: transparent; -moz-text-fill-color: transparent; -webkit-text-fill-color: transparent;
    text-decoration: none;
}

Currently, in Firefox, the text is hidden (because of the color: transparent and text-fill-color: transparent properties) and only the background image and color are visible in the rectangular shape of the element.

Any ideas?

Answer 1

I do not believe text is a valid value for the background-clip property.

MDC states two different declaration, one for Firefox 3.6 and below, and the other for the upcoming Firefox 4. It also states the webkit equivalent.

Firefox (Gecko)     
1.0-3.6 (1.2-1.9.2)    -moz-background-clip:  padding | border
4.0 (2.0)              background-clip:     padding-box | border-box | content-box

Safari (WebKit)
3.0 (522)              -webkit-background-clip:  padding | border | content

See the MDC document here: https://developer.mozilla.org/en/CSS/background-clip

As to what you're trying to achieve, I believe the content-box value is what you're looking for. Note that Firefox 3.6 and below do not appear to support this value.

See: http://www.css3.info/preview/background-origin-and-background-clip/