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

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

.text{
backgrou…


This content originally appeared on DEV Community and was authored by Shuvo

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


This content originally appeared on DEV Community and was authored by Shuvo


Print Share Comment Cite Upload Translate Updates
APA

Shuvo | Sciencx (2021-10-18T14:13:43+00:00) Image as text background in CSS. Retrieved from https://www.scien.cx/2021/10/18/image-as-text-background-in-css/

MLA
" » Image as text background in CSS." Shuvo | Sciencx - Monday October 18, 2021, https://www.scien.cx/2021/10/18/image-as-text-background-in-css/
HARVARD
Shuvo | Sciencx Monday October 18, 2021 » Image as text background in CSS., viewed ,<https://www.scien.cx/2021/10/18/image-as-text-background-in-css/>
VANCOUVER
Shuvo | Sciencx - » Image as text background in CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/18/image-as-text-background-in-css/
CHICAGO
" » Image as text background in CSS." Shuvo | Sciencx - Accessed . https://www.scien.cx/2021/10/18/image-as-text-background-in-css/
IEEE
" » Image as text background in CSS." Shuvo | Sciencx [Online]. Available: https://www.scien.cx/2021/10/18/image-as-text-background-in-css/. [Accessed: ]
rf:citation
» Image as text background in CSS | Shuvo | Sciencx | https://www.scien.cx/2021/10/18/image-as-text-background-in-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts