0

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));
}

2 Answers 2

3

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.

1
  • Definitely a good suggestion. I had to change a fair bit of code to get it working but very useful. About the only downside is the fallback code worked in all browsers, now I've had to put in some ugly IE hacks, still, nothing I can't live with :) Thanks!
    – Chris
    Nov 25, 2011 at 17:26
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.

3
  • Hmm, I was hoping this wouldn't be the case :(
    – Chris
    Nov 25, 2011 at 14:56
  • This is the same thing I said, only a few seconds quicker and without the code :-).
    – ScottS
    Nov 25, 2011 at 14:57
  • @Christ. I updated my answer to include some solutions to independently control the backgrounds like you desire (though it needs to be on different elements).
    – ScottS
    Nov 25, 2011 at 15:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.