How to set an image inside text? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 8

How to set an image inside text?

How can I put an image inside text, so the text has as color the image?

19th Jan 2017, 7:10 PM
Cezar
Cezar - avatar
10 Answers
+ 9
background:url(img); background-clip:text; (might have to add vendor prefixes on clip...)
19th Jan 2017, 7:19 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 12
prefixes: -moz- (mozilla) -o- (opera) -ms- (internet explorer) -webkit- (mobile) (use appropriate)
19th Jan 2017, 7:34 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 10
try vendor prefixes : -webkit-background-clip:text;
19th Jan 2017, 7:24 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 9
Nothing… (is the url accurate?)
19th Jan 2017, 8:53 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 8
Here's my code : <span id="span1"> <h1 style="background:url('image.jpg');-webkit-background-clip:text;text-decoration:underline">MyHomePage</h1> </span> What I did wrong?
19th Jan 2017, 8:05 PM
Cezar
Cezar - avatar
+ 8
Yeah, sure. The file is image.jpg and it's in the same folder. Also, if I don't write background-clip:text, it sets the image as background; if I write it as shown above, nothing happens. However Thank You @ValentinHacker.
19th Jan 2017, 9:01 PM
Cezar
Cezar - avatar
+ 7
I read that it can be done with background-clip, but I didn't understand the entire code.
19th Jan 2017, 7:11 PM
Cezar
Cezar - avatar
+ 6
I just tried it but it sets the image as background and not inside the text.
19th Jan 2017, 7:23 PM
Cezar
Cezar - avatar
+ 6
Tried with Chrome Mobile with -webkit-, there's no difference.
19th Jan 2017, 7:40 PM
Cezar
Cezar - avatar
+ 5
Thank You, but It's the same.
19th Jan 2017, 7:31 PM
Cezar
Cezar - avatar