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.
