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

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠