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

Question

This used to work fine, however recently the gradient doesn't work properly in Webkit. Seems to be fine in Firefox. Can someone check if I'm setting something incorrectly. Don't pay attention to the images. Its the gradient I can't get to render. Any ideas please?
JSFIDDLE: http://jsfiddle.net/UdxUg/2/
-webkit-gradient

Answer 1

It's due to the old syntax, generally webkit/blink now allows using a vendor-less value.
Generally you should use a :pseudo-element --> http://jsfiddle.net/UdxUg/6/
anyways here's a code that works.
works with 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 this 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;
}

Answer 2

Check this I always use this generator to generate gradients, it is faster and it is good.
CSS3 Ultimate Gradient Generator
BTW if you remove that images the gradient works just fine in webkit.
Check on jsFiddle
.create {
border: 1px solid #63ac5c;
background: rgb(188,215,185); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyNCUiIHN0b3AtY29sb3I9IiNiY2Q3YjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9IiNkYmU4ZDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(188,215,185,1) 24%, rgba(219,232,217,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(24%,rgba(188,215,185,1)), color-stop(99%,rgba(219,232,217,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(188,215,185,1) 24%,rgba(219,232,217,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(188,215,185,1) 24%,rgba(219,232,217,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(188,215,185,1) 24%,rgba(219,232,217,1) 99%); /* IE10+ */
background: linear-gradient(to bottom, rgba(188,215,185,1) 24%,rgba(219,232,217,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bcd7b9', endColorstr='#dbe8d9',GradientType=0 ); /* IE6-8 */
height: 23px;
text-align:center;
}