Skip to main content

CSS Sprite: @image-map

Image Map is a catalog of named areas (fragments) of some base bitmap image.

@image-map rule

Image Map is declared by using @image-map declaration:

@image-map toolbar-icons 
/* we define three images under this single logical entity */
src: url(tb-icons.png) 120dpi, /* <= 120dpi */
url(tb-icons-x2.png) 240dpi, /* <= 240dpi */
url(tb-icons-jumbo.png); /* the rest */

cells: 15 2; /* 15 columns, 2 rows in the image */

/* logical names of the parts */
items: bold, italic, underline, strike,
font-family, font-size, text-color, text-back-color;

This declares set of names associated with cells or fragments of the base image.


Image map supports set of sources for different resolutions

image-map() function

Fragment of image map is addressable by the image-map() function:


That selects part part-name of map map-name as animage fragment.

Fragment of an image map can be used at any CSS property that expects and image:

toolbar > button {
background:no-repeat 50% 50%; padding:3px;
/* use of image-map fragments */
toolbar > button.bold { background-image:image-map(toolbar-icons,bold); }
toolbar > button.italic { background-image:image-map(toolbar-icons,italic); }
toolbar > button.underline { background-image:image-map(toolbar-icons,underline); }
toolbar > button.strike { background-image:image-map(toolbar-icons,strike); }