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;
}

This background clips to the text.