How to clip a background on a colored text (only in css)

Question

I have a product configurator on my website. The user can write a word on a clothe and a text appears on the product image.

I want to style this text to look like an embroidery. So i put a text shadow, the text color changes in function of the product color, but now, i want to put a "filter" over the color.

Constraint: i just have access to the CSS.

here's a fiddle i did:

  #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's the final fiddle for the one who will try one day to do the same thing:

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;



}