CSS Tutorial : Moving an image behind text
Moving image behind Text : CSS Tutorial
In this tutorial we are going to learn how to move an image behind the text for an infinity times using CSS3 elements. Our result is coming something like this showing below
<style>
h1 {
display: inline-flex;
font-family: "Impact", sans-serif;
background: url("undersea.jpg");
font-size: 80px;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: #5b728a54;
animation: move 30s linear infinite;
letter-spacing: .1rem;
}
@keyframes move {
from { background-position: 0 80%; } to { background-position: 100% 50%; }
}
.txta {
margin:auto;
text-align:center;
}
</style>
In this above code main elements which are giving this awesome look are : background-clip : text ; and the animation.
and the HTML code using to display is
<div class="txta">
<h1>WEBSITECODER</h1>
</div>
that’s it.
Are you looking for more CSS Tutorial ?
1 thought on “CSS Tutorial : Moving an image behind text”