Multiple CSS3 backgrounds, replace top layer - html

Question

I have a button with a background-image property that sets 1) an icon for the button and 2) a CSS3 background gradient. I would now like to override the background gradient further down the page, so the icon remains the same and I can create many button colours by simply overriding the background gradients.
Is there currently a way to override a specific layer of a multiple background property?
http://gard.me/1ulmH
HTML:
<a class="newButton blue" href="#">hello world</a>
CSS:
.newButton /* Orange by default */
{
margin: 20px;
display: inline-block;
padding: 12px 20px;
background: none;
background-repeat: no-repeat;
background-position: 9px 5px;
background-position: 9px 5px, 0 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-width: 1px;
border-style: solid;
font-family: Verdana, Arial, Sans-Serif;
text-decoration: none;
text-align: center;
/* Orange stuff */
color: #FFECEA;
border-color: #A03E33;
background-position: 0 0;
background-color: #E46553;
background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -o-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -moz-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -webkit-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -ms-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -webkit-gradient(linear, left bottom, left top, color-stop(0, #D15039), color-stop(1, #F27466));
}
.newButton.blue { /* Blue */ /* Here I need to overwrite the button background colour */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0B3661), color-stop(1, #0E4479));
}

Answer 1

enter code hereYou need to give it the full image usage just like the original definition, because the new definition is going to overwrite the whole background. So
.newButton.blue {
background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -webkit-gradient(linear, left bottom, left top, color-stop(0, #0B3661), color-stop(1, #0E4479));
}
Updated:
If you really want to individually switch the gradients, then you need to either put a span element in the a tag to place your icon image into and set that background independently on the icon (span) and gradient (a) OR since the gradients are new browser technology, do those on a :before or :after pseudoelement set to sit below the a tag. Something like:
a {
position: relative;
z-index: 1;
...icon related background code here...
}
a:after {
content: '';
display: block;
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
...gradient related background code here...
}
EDIT: Note, as I reread your original question, it appears you may want the gradient above the icon. If so, you need to swap the background code for what I gave above.

Answer 2

When you set a new value for "background-image" it fully overrides its previous definition. Only the last definition applied will prevail.
I suggest you include the icon url for every background-image definition.