[whatwg] img as a layout tool to describe the displayed region of a CSS background-image

Ingo Chao i4chao at googlemail.com
Wed Apr 28 13:59:23 PDT 2010

2010/4/28 Tab Atkins Jr. <jackalmage at gmail.com>:
> On Wed, Apr 28, 2010 at 1:04 PM, Steve Dennis <admin at subcide.com> wrote:
>> On 28/04/2010, at 7:43 PM, Tab Atkins Jr. wrote:
>>> On Wed, Apr 28, 2010 at 4:31 AM, Ingo Chao <i4chao at googlemail.com> wrote:
>>>> http://dev.w3.org/html5/spec/Overview.html#the-img-element
>>>> "The img must not be used as a layout tool.
>> I think this may be a little vague/broad.  I understand the intention, but say for example I have a logo image in the top left of my header, and my header doesn't have a static height set (in case something in the header needs it to grow or shrink for instance), then the height of the logo image is dictating the height of its parent, and this would seem to me, to be using an img as a layout tool, in a sense.
> Don't overthink it.  It's a very simple rule.  ^_^  Having an img
> *interact* in the layout is both fine and obviously necessary.  The
> restriction is to prevent someone from using an <img> element *solely*
> for layout purposes.
> ~TJ

I agree that using an img that spans up an area to show a fragment of
a background-image is a hack, non-conforming with HTML5.

Thanks for the answers.

We are combining a hundred icons into one sprite for performance
reasons, and it is not that easy to mask out portions of a
background-image with pure CSS in every case. Tricky, or hackish.
Maybe CSS3 will allow fragment indentifiers to slice a background
image; a less hackish solution for the usage of sprites.


Ingo Chao

More information about the whatwg mailing list