CODEWITHSUNDEEP
css
Tarquin
Tarquin

Reputation: 492

Creating a button with a background and foreground image

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 16x16 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.

Upvotes: 0

Views: 2520

Answers (2)

sascha
sascha

Reputation: 4690

Multiple backgrounds is only supported within the same CSS class / element definition. Means, you have to set both backgrounds in .button.

Your .print has to contain the default background too seperated by a comma and followed with your print.png icon.

edit

My answer wasn't really clear about that. you have to specify the background first, which should be on top of the other one. Here's some example code with random pictures.

Demo: http://jsfiddle.net/RzWfp/

.button {
    background-image: url(http://www.myinkblog.com/wp-content/uploads/2009/02/background2.jpg);
    border:solid 1px #b1a874;
    color:#7f7f7f;
    font-size:11px;
    padding:2px 6px 2px 6px;
    cursor:pointer;
    line-height:14px !important;
}

.button-test {
    background-image:  url(http://www.famfamfam.com/lab/icons/silk/icons/feed.png), url(http://www.tutorial9.net/wp-content/uploads/2008/07/air-balloon-gradient.jpg);   
    background-position: left center, center center;
    background-repeat: no-repeat;
    padding-left: 20px;
}

Upvotes: 1

cimmanon
cimmanon

Reputation: 68319

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

Upvotes: 1

Related Questions