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>;
}

Where:

• <name> is a valid CSS identifier - name of the map.
• src is either single url(...) or list of comma separated url() NNdpi pairs like: url(x1.png) 100dpi, url(x2.png) 200dpi, url(jumbo.png).
  If screen resoultion is less or equal to DPI value of the URL in a pair then image with that URL is used to render the image map. Last element in the list may not contain DPI value - it will be used if screen DPI is greater than any value in the list.
• cells is a pair of positive integers - first is number of columns and second is number of rows. The used image is split on that number of cells and each cell or group of cells may have name assigned to them using items property:
• items is a comma separated list of item definitions, each such definition can be one of these:
• <name>  - just a section name, this name will be assigned to the next cell in sequence. Cells are columns-then-rows ordered, first cell (leftmost in first row) has number 1.
• <name> <number> - section name and cell number (positive integer from 1 to total number of cells). Next number in sequece will be set to next cell.
• <name> <column:number> <row:number> - section name assigned to cell at column/row location. Next number in sequece will be set to next cell.
• <name> <column:number> <row:number> <columns:number> <rows:number> - section name assigned to rectangular range of cells starting at column/row location and spanning that number of columns and rows. Next number in sequece will not change.

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.

Examples:

1. Toolbar alike use case

The image-map declaration:

@image-map toolbar-icons 
{
  src:url(rttb.png);
  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 {
      size:180px;
      background: no-repeat 50% 50% image-map(dpi-aware); /* either star-1x.png or star-2x.png */   
      border:1px solid;  
    }