Designed By: @anutrickz
Version: 1.0.2-beta

Add Image in Text Background with animation using Pure css

 How to Add Image in Text Background with animation using Pure css
Add Image in Text Background with animation using Pure css


Ever wanted to put an image into a text, there are some easy ways to do this in Photoshop but what if you want this on a web page with dynamic text? Thankfully there are a few ways to go about doing this. The idea is just to overlay some text over an image and use -webkit-background-clip:text CSS effect to get the desired effect.

In this article, we will use HTML and CSS to set the image in the text background.


HTML Code: HTML code is used to create a basic structure of the body. 

CSS Code: The CSS property is used to set the image as background in the text. The background-image property is used to set an image as background. The -webkit-text-fill-color property is used to give the text a transparent color, the background image will show through the text, thus completing the clipping effect.




➤ Video Tutorial :



contact us: