Clipping text using background-clip
The HTML
<h1 class="bgClip">Clip Text</h1>
The CSS
.bgClip {
background:url('../images/clouds.jpg');
background-repeat:repeat-x;
background-position:0 0;
font-size:200px;
text-transform:uppercase;
text-align:center;
font-family:'Luckiest Guy';
color:transparent;
-webkit-font-smoothing:antialiased;
-webkit-background-clip:text;
-moz-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
margin:0;
If you want to animate it
-webkit-animation:BackgroundAnimated 15s linear infinite;
-moz-animation:BackgroundAnimated 15s linear infinite;
-ms-animation:BackgroundAnimated 15s linear infinite;
-o-animation:BackgroundAnimated 15s linear infinite;
animation:BackgroundAnimated 15s linear infinite;
}
@keyframes BackgroundAnimated {
from {
background-position:0 0
}
to {
background-position:100% 0
}
}
@-webkit-keyframes BackgroundAnimated {
from {
background-position:0 0
}
to {
background-position:100% 0
}
}
@-ms-keyframes BackgroundAnimated {< from {
background-position:0 0
}
to {
background-position:100% 0
}
}
@-moz-keyframes BackgroundAnimated {
from {
background-position:0 0
}
to {
background-position:100% 0
}
}