Using webkit clip to show image behind text

by Michel Plungjan

HTML

<div id="container">  
  <h1>HAWAII</h1>
</div>

CSS

h1, p { margin: 0; }

#container {
    padding: 20px 20px 100px;
    margin: 50px;
    position: relative;
}
#container h1 {
    /* has same bg as #container */
    background: url(http://media.royalcaribbean.com/content/shared_assets/images/destinations/regions/hero/hawaii_01.jpg);

    font-size: 12em;
    font-family: impact;
    left: 0;
    line-height: 100%;
    padding-top: 25px; /* padding + border of div */
    position: absolute; /* position at top left of #containter to sync bg */
    text-align: center;
    top: 0;
    width: 100%;
    text-fill-color: transparent; /* not yet supported */
    background-clip: text; /* not yet supported */
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -moz-text-fill-color: transparent; /* not yet supported */
    -moz-background-clip: text; /* not yet supported */
    /* text-shadow: 5px 5px 0px rgba(0,0,0,0.1); */
}