How to pin background on colored text (only in css)

Question

I have a product configurator on my site. The user can write a word on clothes, and text appears on the product image.

I want this text to look like embroidery. So I put a text shadow, the color of the text changes depending on the color of the product, but now I want to put a “filter” over the color.

Limitation: I just have access to CSS.

here is the fiddle I made:

#text { font-size:90px; text-align:center; font-family:'petit_formal_script'; -webkit-font-smoothing:antialiased; text-shadow: 2px 2px 2px black; color:lightblue; } #text:after { content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-image:url('http://hdwbin.com/wp-content/uploads/2014/11/red-background.jpg'); -webkit-background-clip:text; -moz-background-clip:text; -webkit-text-fill-color:transparent; } 

http://jsfiddle.net/u2to713t/

Thanks in advance.

Answer 1

I finally did it. The result is not what I expected, but it works. Here is the final fiddle for someone who will one day try to do the same:

http://jsfiddle.net/u2to713t/13/

 #text { font-size:90px; text-align:center; font-family:'petit_formal_script'; -webkit-font-smoothing:antialiased; text-shadow: 1px 2px 3px #474747; color:lightblue; } #text:before { content: attr(data-text); position:absolute; left:-1px; top:7px; right:0; bottom:0; opacity:1.0; z-index: 1; color:transparent; text-shadow:0px 0px 0px; background:url("http://image.noelshack.com/fichiers/2015/20/1431421588-brodrwhite.png"); -webkit-background-clip:text; -moz-background-clip:text; background-clip:text; } 

Answer 2

you can add background image to transparent text with transparent shadow shadow using rgba

#text{ font-size:90px; text-align:center; font-family:'petit_formal_script'; -webkit-font-smoothing:antialiased; text-shadow: 2px 2px 2px rgba(0,0,0,0.5); color:transparent; background-image:url('http://hdwbin.com/wp-content/uploads/2014/11/red-background.jpg'); -webkit-background-clip:text; -moz-background-clip:text; -webkit-text-fill-color:transparent; }

Answer 3

Is that what u means?

 #text { background: url(http://image.noelshack.com/fichiers/2015/20/1431421588-brodrwhite.png) repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size:90px; text-align:center; font-family:'petit_formal_script'; }