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

Re: [css3-background] CSS Image Replacement

From: Giovanni Campagna <scampa.giovanni@gmail.com>
Date: Thu, 4 Jun 2009 18:33:50 +0200
Message-ID: <65307430906040933p80043a7o428f4db36f3cb27f@mail.gmail.com>
To: Alexis Deveria <adeveria@gmail.com>
Cc: www-style@w3.org
2009/6/4 Alexis Deveria <adeveria@gmail.com>:
> 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.

I expect that image-position / content-position applies only to
replaced content (ie images, videos, embedded plugins...)

> Thanks,
>
> Alexis Deveria
> http://a.deveria.com
>
>
Received on Thursday, 4 June 2009 16:34:22 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:18 GMT