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.