W3C home > Mailing lists > Public > www-style@w3.org > June 2009

Re: [css3-background] CSS Image Replacement

From: Alexis Deveria <adeveria@gmail.com>
Date: Thu, 4 Jun 2009 12:23:24 -0400
Message-ID: <5e5974a0906040923x31d5c44fr7c3eeaad56da5241@mail.gmail.com>
To: www-style@w3.org
On Thu, Jun 4, 2009 at 12:03 PM, Giovanni Campagna
<scampa.giovanni@gmail.com> wrote:
> 2009/6/4 Alexis Deveria <adeveria@gmail.com>:
>> 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.
> 1) As Bert Bos pointed out recently, sprites are out of scope of CSSWG
> http://lists.w3.org/Archives/Public/www-style/2009Jun/0019.html
> 2) There is an image-position property (that may be renamed
> content-position) in CSS Paged Media Module Level 3
> http://dev.w3.org/csswg/css3-page/#propdef-image-posn

Ah, very educational, thank you. Hopefully Media Fragments will
adequately cover this, then.

Unless image-position/content-position would only affect the image in
"url(header.png), contents" and not the fallback (and I suspect it
would affect both), this would probably not be a great solution as the
fallback content would likely appear out of place.


Alexis Deveria
Received on Thursday, 4 June 2009 16:23:59 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:27 UTC