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

To extend @sgress454's answer. Nowadays, background-clip: text works in Firefox, but its browser compatibility is still not full (Safari and Chrome are slow...). background-clip: text is still what you are looking for:

background-clip: text;

The background is painted within (clipped to) the foreground text.

MDN

Demo:

body {background: black;}

div {
  background: url(https://images.unsplash.com/photo-1543005472-1b1d37fa4eae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60), black;
  background-clip: text;
  color: transparent;
}

<div>This background clips to the text.</div>

Answer 2

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:

Answer 3

Limited browser support, but background-clip can get you this effect: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/ (Hit the Animate buttons for more fun)

Using SVG you can do it like this: http://people.opera.com/dstorey/images/newyorkmaskexample.svg (View source to see what is actually done, see reference article too)

Using a background image and then CSS, you could do this: http://www.netmagazine.com/tutorials/texturise-web-type-css

Answer 4

There is a background-clip: text property in CSS3, although it doesn't work in every browser. See here for more details.