New Tutorials:   JAVASCRIPT    SASS/SCSS    PL/SQL  
CLOSE
   CSS  Web Development  HTML  
   Technology    Tricks

Dancing Text with GIF background using CSS

         
 OCTOBER 31, 2019   by iamabhishek

This is a simple example more for fun in which we will use a .gif image as background to give an illusion of text dancing with the background image.

Following is the CSS code:

p{
      font-size: 13px;
      line-height: 10px;
      background:  url(https://66.media.tumblr.com/573aeb79c3c0d3fc4e46162aeb33c6c1/tumblr_p3d02kJJZe1r53kfuo1_400.gifv) no-repeat; 
      background-size: contain;
      background-position: center;
      background-attachment: fixed;
            
      -webkit-background-clip: text;
      -webkit-text-fill-color: rgba(255, 255, 255, 0) ;
      font-weight: 900;
      margin: 0;            
}

You can change the background url as per the image of your choice. In the CSS code above, background-size:contain is used to resize the background image to make sure the image is fully visible. The property background-position: center is to position the background image in the center.

For our example, we have supplied some random text data in the HTML, keeping the size small, line height also small to include more text on the background image. If you want you can change this.


RELATED POSTS



Subscribe and receive amazing posts directly in your inbox.