The image-map feature provides following abilities to CSS:
  1. To support so called image sprites when portion/fragment of base image (sprite catalogue) is used as if it was standalone image.
  2. And/or to support multiple images of different sizes for different screen DPI using single logical name.

The image-map feature uses @image-map at-rule to define the map itself and the image-map() function that is used in place of url(...) in places where image url is accepted.

The @image-map at-rule

The @image-map rule consists of of the keyword "@image-map", followed by an identifier giving a name for the image map (which will be referenced in image-map(name, ...) function):

@image-map <name> {
   src: <sources-list>;
   cells: <columns> <rows>;
   items: <items-list>;


Cells and items properties are optional in @image-map declaration, if they omitted then such image map can be used only as a whole.

The image-map() function

The image-map() function defines image section "point of use" and can be used in all places in CSS where image is expected.

There are two forms of image-map function usage:

  1. image-map(<image-map:name>) - use one of images declared in @image-map src property according to current screen DPI settings.
  2. image-map(<image-map:name>, <item:name>) - use named item from the image map as an image.

If there is no such image-map or it does not contain such item name nothing is rendered.


1. Toolbar alike use case

The image-map declaration:

@image-map toolbar-icons 
  cells:15 2; /* 15 columns, 2 rows */
  /* logical names of the parts, see toolbar-icons.png */ 
  items: ulist, olist, unindent, indent, picture, table, link;

And its use:

.toolbar > button.ulist    { background-image:image-map(toolbar-icons,ulist); } 
.toolbar > button.olist    { background-image:image-map(toolbar-icons,olist); } 
.toolbar > button.unindent { background-image:image-map(toolbar-icons,unindent); } 
.toolbar > button.indent   { background-image:image-map(toolbar-icons,indent); } 
.toolbar > button.picture  { background-image:image-map(toolbar-icons,picture); } 
.toolbar > button.table    { background-image:image-map(toolbar-icons,table); } 

2. DPI-aware image map

Image map that uses star-1x.png for DPIs less or equal 100

    @image-map dpi-aware {
      src: url(star-1x.png) 100dpi,
           url(star-2x.png) ;

And its use:    

    #star {
      background: no-repeat 50% 50% image-map(dpi-aware); /* either star-1x.png or star-2x.png */   
      border:1px solid;