Final output :
Please note:This masking / clipping an image as text background works perfectly fine only in Google Chrome.

An interesting way by which a fine visual representation of text can be attained is the masking of the text. This tutorial explains how we can obtain this effect.

The style used:

Explanation:

• '-webkit-text-fill-color', has been used to specify the text-color for the text as transparent.
• '-webkit-background-clip property' used to clip the background image to foreground text.
  The shape of the foreground content (transparent content in this case) is applied as a mask to clip background. The png image file (The image can be in any format) which we want to see through our text , should be saved along with the CSS file and HTML file in the same folder.

Hence, with the help of a mere 6 line code, we can get this effect. Simply clipped. :)

Tag: CSS3 tutorial to mask text, CSS3 tutorial to clip an image as text background.