Re: [css3-background] CSS Image Replacement

On Thu, Jun 4, 2009 at 11:22 AM, fantasai <fantasai.lists@inkedblade.net> 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.

Thanks,

Alexis Deveria
http://a.deveria.com