CSS Tutorial : Moving an image behind text

1
CSS3 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

Leave a Reply

Your email address will not be published. Required fields are marked *

  ×  5  =  40