How can I insert image in the text instead of a color using CSS3?

Question

I have a text heading which is white in color. I want to put an image instead of white color to the text. The Text is big enough to show the image which will be filled in.

This is what I basically want.. There's completely different background image behind the text and I want to fill in another image on the text.

So you want that text to be kinda mask for a pic? Now, that would be a sight! — Batu.Khan, Mar 30 '15 at 20:53
You might want to look at the [CSS background -clip property](http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html). — Terry, Mar 30 '15 at 20:54
I would do that in Photoshop, creating a png with a transparent background and use that. — Joe T. Boka, Mar 30 '15 at 23:58

score 1 · Accepted Answer · answered Mar 31 '15 at 03:04

1

You need background-clip to mask up the text. Here's the solution:

<h1>Shashank Jaiswal</h1>
h1 {
    font-family: Arial;
    font-size: 5em;
    text-align: center;

    background-image: url(http://tn.clashot.com/thumbs/3391302/58941884/thumb_w800.jpg);

    -webkit-background-clip: text;
    background-clip: text;

    color: rgba(0,0,0,0);
}

DEMO : http://jsfiddle.net/gnoyubwc/

answered Mar 31 '15 at 03:04

Wilf

2,297
5
38
82

Thanks. It's working for chrome. I tried -moz-background-clip:text; but didn't work in Firefox... I have got some ideas... trying now. – shashankj Mar 31 '15 at 04:20
refer to this link http://stackoverflow.com/questions/9362639/moz-background-cliptext-does-not-work-in-firefox - sorry about that :( – Wilf Mar 31 '15 at 14:49

Arvind Lakhani · Answer 2 · 2015-03-31T18:14:05.333

-1

You can use photoshop for that and create a clipping mask. You'll get exactly what you wanted!

edited Mar 31 '15 at 18:14

answered Mar 31 '15 at 02:52

Arvind Lakhani

21
1
1
6

How can I insert image in the text instead of a color using CSS3?

2 Answers2