How to display image under text like as a background?

Question

I want to display Image under Text. I have done this with Photoshop but it\'s a Image. So every time text change I have to do changes in Photoshop. I want to achieve same us

Answer 1

Combining the solutions of Ken - Abdias Software and mplungjan, I decided to make a relatively cross-browser CSS solution that allows changing of the text from an array.

Live demo

Important CSS (for clipping)

h1 {
    background: white;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
    width: 100%;
    max-width: 960px;
    margin: 5% auto;
}
.backgroundclip h1 span {
    background: url(http://i.imgur.com/TzKl9Kml.jpg) center center no-repeat;
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

Important jQuery for looping

var terms = ["This", "is", "Hawaii"];
function rotateTerm() {
  var ct = $("h1 > span").data("term") || 0;
  $("h1 > span").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct])
              .fadeIn().delay(600).fadeOut(600, rotateTerm);
}

$(rotateTerm);

References to the original authors are in the Fiddle. Adapted from those authors.