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)

Read next

hungryoctopus profile image

How I Set Up My Own Server (and Why You Should Too)

Amélie -

mdarifulhaque profile image

1277. Count Square Submatrices with All Ones

MD ARIFUL HAQUE -

mshsayket profile image

Laravel 11 Generate and Read Sitemap XML File Tutorial

Saddam Hossain -

vaultdeveloper profile image

Event loop visualiser for lerners

Vault Developer -