With Css3  we can create a transparent looking text over a image . So the image will be visible through the text.

View Demo

lets start with the code.

<div id="cliptext">
  <h1>Hello World</h1>
</div>

Now the css . What we will do is use the css3 background-clip property . We will Set a background image on the h1 text element and then clip it out, and set the text fill color to transparent so the background image will be visible.

Here is the CSS

#cliptext {
  background: #C1E6F5;/* the blue background color around the text */
  background-size: cover;
}
#cliptext h1 {
  text-align: center;
  color: #fff;/* just incase the background-clip is not supported so text color white */
  background: url(http://upload.wikimedia.org/wikipedia/commons/c/c1/Bare_mountain,_nevada.jpg) 70px -150px no-repeat;
  background-size: 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 150px;
}

Browser Support

‘background-clip’ is only supported by modern webkit browsers . So in browsers that do not support background clip property the whole image will be visible and the text color will be white . A better way to use this is to validate the property using Modernizer.