Question

Currently, I have the following class:

#btnHelp
{
 background: url(images/btnHelp.png) center no-repeat, -webkit-gradient(linear, left top, left bottom, from(#9adc6d), to(#6eba3a));
}

I’d like to separate out the background image part from the gradient part into 2 separate classes, like this:

#btnHelp
{
 background-image: url(images/btnHelp.png);
 background-position:center;
 background-repeat:no-repeat;
}

.green
{
 background: -webkit-gradient(linear, left top, left bottom, from(#9adc6d), to(#6eba3a));
}

but one overwrites the other, rather than combining the two.

Answer 1

You can’t. According to the webkit blog post:

You can use gradients in the following places:

background-image
border-image
list-style-image
content property

Of which, the only one that is useful to you is background-image. You can obviously separate out the position and repetition sections though.