Use text as a mask on background image

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


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


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:

What it looks like when it works

Tags:

Html

Css