[css3-background] CSS Image Replacement

Any designers on this list are probably familiar with the concept of
CSS image replacement. The use case is that people wish to replace
text (often a logo or a header) with an image using CSS. There are a
variety of ways to achieve this currently [1], but all have certain
drawbacks that either hamper accessibility in some situations, or
require additional markup.

Is anyone familiar with a solution to this problem that can be
achieved through some CSS3 module? (most likely in Backgrounds and
Borders [2]) Going through the current spec, I wasn't able to find

I believe all that's really necessary is a background(-image) property
that states that the content should be hidden if the image is loaded.
That would satisfy all CSS/images on/off conditions as mentioned on
[1]. I'm having a hard time finding a good single word for it, but
perhaps something like "background-image-replace: replace".

Whatever term is used, it seems like a simple property to add to solve
a common use case.

[1] http://css-tricks.com/nine-techniques-for-css-image-replacement/
[2] http://www.w3.org/TR/css3-background/


Alexis Deveria

Received on Thursday, 4 June 2009 15:06:42 UTC