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; }
Comments
Post a Comment