Use text as a mask on background image

Question

I have a nice background on my page, and I want my text header to act as a mask to cut through its containing div and have the background as a texture.

Can I

Answer 1

As CSS-Tricks shows in this article, 'image behind text' can be done as such:

h1 {
   color: white;  /* Fallback: assume this color ON TOP of image */
   background: url(images/fire.jpg) no-repeat; /* Set the backround image */
   -webkit-background-clip: text; /* clip the background to the text inside the tag*/
   -webkit-text-fill-color: transparent; /* make the text transparent so 
                                          * the background shows through*/
}

But it isn't guaranteed to work on all browsers, so they suggest a few work arounds, like modernizr.

Here's what it looks like when it works: