Re: [css3-background] CSS Image Replacement

Tab Atkins Jr. wrote:
> On Thu, Jun 4, 2009 at 10:53 AM, Alexis Deveria <> wrote:
>> On Thu, Jun 4, 2009 at 11:22 AM, fantasai <> wrote:
>>> Alexis Deveria wrote:
>>>> 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
>>>> one.
>>> How about
>>> #header {
>>>  content: url(header.png), contents;
>>> }
>>> <h1 id="header">My Pretty Header</h1>
>> Ah, didn't realize was possible, cool! That does indeed solve the use
>> case in theory. However, without the positioning options the
>> background-image property offers, this solution does not allow for
>> sprites, which may be an issue for some authors. There may also be
>> other benefits of using background-image, so ideally it would still be
>> nice to be able to include them.
> Note, though, that this really *is* just a theoretical solution - I
> don't believe anyone implements it yet.
> Keep in mind, though, that many times image-replacement isn't actually
> necessary.  Just using an <img> with @alt does what you want while
> retaining semantics and accessibility.

This is true for what we perceive as practical purposes on the current 
web; but as David Woolley so rightly stated only just today,[1] whether 
an image is background or foreground should be a fundamental part of the 
information design.  An H1 consisting of a foreground image with @alt is 
not the same as an H1 consisting of text.

That said, I'd struggle to muster much energy to deter people from using 
the former technique in most situations.


Anton Prowse

Received on Thursday, 4 June 2009 18:04:33 UTC