webkit - Can't combine CSS Sprite and Background Gradient in Chrome/Safari -

this used work fine, gradient doesn't work in webkit. seems fine in firefox. can check if i'm setting incorrectly. don't pay attention images. gradient can't render. ideas please?

jsfiddle: http://jsfiddle.net/udxug/2/

-webkit-gradient 

it's due old syntax, webkit/blink allows using vendor-less value.

generally should use :pseudo-element --> http://jsfiddle.net/udxug/6/

anyways here's code works.

works image

.create {     border: 1px solid #63ac5c;     background: #d9ead8 url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px;     background: url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px, -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dbe8d9), color-stop(100%, #bcd7b9));     /* safari 4+, chrome 2+ */     background: url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px, -moz-linear-gradient(top, #dbe8d9, #bcd7b9);     background: url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px, -webkit-linear-gradient(top, #dbe8d9, #bcd7b9);     background: url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px, linear-gradient(top, #dbe8d9, #bcd7b9);     height: 23px;     text-align:center; } 

use instead though

.create {     border: 1px solid #63ac5c;     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dbe8d9), color-stop(100%, #bcd7b9)); /* safari 4+, chrome 2+ */       background: -webkit-linear-gradient(top,  #dbe8d9, #bcd7b9);     background: -moz-linear-gradient(top,  #dbe8d9, #bcd7b9);     background: linear-gradient(top,  #dbe8d9, #bcd7b9);      height: 23px;     text-align:center;     position: relative }  .create:before {     content: '';     background: #d9ead8 url('http://tinyurl.com/mezxsk6') no-repeat 0 0;     height: 23px;     width: 23px;     position: absolute;     top: 0;     left: 0; }