Name: Image as text background in CSS
Rating: 3.9 (7470 reviews)
Author: 0shuvo0

Image as text background in CSS

Shuvo - Oct 18 '21 -

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

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

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;
}

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;
}