DEV Community

Cover image for Image as text background in CSS
Shuvo
Shuvo

Posted on

Image as text background in CSS

#webdev #beginners #programming #css

Image as text background looks really awesome right? However doing this doesn't really work

.text{ background-image: url("./img/img.jpg"); }
Enter fullscreen mode Exit fullscreen mode

But we can achieve our desired effect by adding just two more lines of code

.text{ background-image: url("./img/img.jpg"); color: transparent; background-clip: text; }
Enter fullscreen mode Exit fullscreen mode

To ensure better reliability we can use some browser prefixes. eg

.text{ background-image: url("./img/img.jpg"); color: transparent; background-clip: text; -webkit-background-clip: text; }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)