Suppose I have a link that has an image background and it will look like this (see attachment) - having a background with rounded corners:
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:
<a href='#'>BUTTON</a>
CSS:
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:
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.
You can include a background colour that sits behind the background image.
a {background:url(button.png) blue;}
It is good practice to do this on all background images, and choose a colour that is as similar to the overall image tones as possible. This ensures that the site looks close to the design even when the image can’t be displayed.
One thing to note is that if you have transparent sections of the image, the background colour will show through these.
hmm I went to approve your attachment and it disappeared. Attach it again if you need to.
I don’t see a solution to this other than changing the text colour to a dark colour to start with and then when the page has loaded change it back to white via script etc.
The solution with scripts doesn’t look elegant to me. But as a last resort I could load the background images via a script and after onload replace the background colour with the image and change the colour of the text.
Or perhaps this:
<a href='#'><span>BUTTON</span></a>
And apply background colour only to the span element, the span can be smaller than the whole link and if only the corners are transparent then the background colour will not show through.
The ideal would a css property that would replace the background colour with the background image when loaded but as far as I know there’s nothing like that in any specifications.
Yes you could apply a background to the inner element but of course that will give you a solid block effect around the text but may be a good compromise especially as one of the guidelines of accessibility is that text should be visible if images are missing and if your background image is missing or the user has turned images off then the white text on a white background will otherwise be invisible.
If your page behind the image has a solid background then you could replace the transparent parts with that solid colour. If your page behind the image has a textured, patterned or picture background then it’s going to be trickier. There may be other options depending on the shape of the image and where the transparency is, can you give us a link to a live/demo example?
I don’t have a demo yet but this is not a real problem that I’m facing at the moment with my design - it’s more that I’m cautious and trying to make all the css elements as flexible as possible. At the moment the background is white so there’s no problem but it is possible I will have part of the page on a different background and I just wanted to be prepared ahead and use transparency/opacity wherever possible instead of fixed colours.
For now, I’ll get rid of transparency and choose better accessibility. I’d use transparent png’s if I found a good enough solution.