html - Text over skewed div with background image -

is there way put text on div has been skewed background image on it? heres example of i'm trying achieve because i'm using ::before pseudo element text appears behind image.

html

<div class="diag-right">text here</div> 

css

.diag-right {     height:220px;     float:right;     width:260px;     position: relative;     overflow: hidden;     outline: 1px solid transparent;     left: -120px;     transform: skew(-20deg);      -o-transform: skew(-20deg);      -moz-transform: skew(-20deg);      -webkit-transform: skew(-20deg);     -ms-transform: skew(-20deg);      -sand-transform: skew(-20deg); }  .diag-right::before {     content: "";     position: absolute;     width: 370px;     height: 100%;     top: 0;     left: -40px;     background: url("http://imgur.com/t25mfev.jpg") 0 0 repeat;     transform: skew(20deg);      -o-transform: skew(20deg);      -moz-transform: skew(20deg);      -webkit-transform: skew(20deg);     -ms-transform: skew(20deg);      -sand-transform: skew(20deg); } 

live example

http://jsfiddle.net/jgje3/

is there way or suitable work around?

you can use

.diag-right::before {   z-index: -1; } 

to place ::before behind .diag-right element. note, solution not usable, when .diag-right has background of own, because lay above ::before.