DEV Community

Cover image for Image as text background in CSS
Shuvo
Shuvo

Posted on

Image as text background in 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

Discussion (0)