Suppose I have a link that has an image background and it will look like this (see attachment) - having a background with rounded corners:
button.png

I see my attachment is 'pending approval' - if you can't see it then have a look at Home of the Mozilla Project - what I meant was a button similar to the orange 'Sign me up!' except with white text on dark background. The important thing is that the rounded corners are transparent.

Html:
Code:
<a href='#'>BUTTON</a>
CSS:
Code:
a {
    background: url(button.png);
    color: white;
}
The problem is that the text colour in the link is white and the background of my page is white so that without the background image the text is not visible. This means that before the browser loads the background image the text is not visible, which I would like to avoid.

I used to do this:
Code:
a {
    background: url(button.png) navy;
    color: white;
}
which would display a dark background before the images are loaded - but now my background images have transparency and I can't simply apply a background colour because it will leak through the transparent areas.

Apart from links <a> I will also have headers <h2> with similar backgrounds and would like a relatively clean solution to this. Will I have to use some additional wrapping elements like <span> or <div>? I'd like to avoid that and also preserve transparency if possible.