Question

I have a small issue trying to get the following to work, and am not sure if it is something that CSS3 is designed to deal with or not. I have looked around and found that multiple background images are supported, however trying the many examples have resulted in nada.

This is the primary CSS code for rendering my buttons:

.button {
    background:#eee url(images/button.gif) repeat-x 0 0;
    border:solid 1px #b1a874;
    color:#7f7f7f;
    font-size:11px;
    padding:2px 6px 2px 6px;
    cursor:pointer;
    line-height:14px !important;
}

The above code produces the standard buttons which are fine. But now I want to add icons on certain buttons, such as a print button. I use 2 sets of additional CSS class:

input.addImage {
    background-repeat: no-repeat;  /* once */
    background-position: 5px 2px;  
    padding-left: 16px;     
    vertical-align: middle;
}

And:

input.Print {
    background-image: url(../img/buttons/print.png); /* 16px x 16px */
}

As you can see my image is in fact 16×16 which fits nicely into the buttons. However the original background image is stripped away completly, leaving the background color as transparent.

I am sure that if its possible, its something basic I am overlooking, and look forward to figuring this out.

Finally the code for the button:

<input type="button" class="button addImage Print" ... >

Thank you for your valuable time.

Answer 1

When you apply a property in CSS, it completely overwrites any previously defined property for that element. What you need to do is tell it to apply 2 backgrounds to the element, which is done like this:

.button.Print {
    background-image: url(images/button.gif), url(../img/buttons/print.png);
}