How to stop background layering with CSS?

I use background image on <input type="submit"> to make it开发者_JS百科 look like a button. So I have the following in my CSS:

input.button {
    background-image:url(/path/to/image.png);
}

Also, I want to show different image when button is disabled, the following CSS should do that:

input.button[disabled] {
    background-image:url(/path/to/disabled/image.png);
}

The problem is, in iPhone browser that disabled image is drawn above the normal one, not instead of it. I believe it is because CSS3 allows for multiple background images so Safari does it's best at drawing both of them. In fact, FF4 does the same if I use background instead of background-image. With the code as it is, however, FF4 draws it perfectly.

So, the question is, is there some way to replace existing background image in mobile Safari instead on layering it on top?

---

You can combine both images into a larger one and use the sliding doors technique (using background position to switch between enabled and disabled images).

---

You could use a CSS-sprite instead:

input.button {
    background: transparent url(/p/2/img.png) no-repeat top left scroll;
}

input.button[disabled] {
    background-position: bottom left;
}

---

In the end I solved my problem by eliminating transparency from my images and also adding opacity: 1 to the stylesheet (otherwise mobile Safari made them transparent for some reason)

Kind of intermediate solution though.