list-style-image

The list-style-image property is used to specify an image that is to be used as a marker (bullet) for list items or elements with <a href="http://tympanus.net/codrops/css_reference/display">display</a>: list-item.

When the image is available, it will replace the the marker set using the list-style-type property.

Trivia & Notes

The size of the image is calculated from the following rules:

1. If the image has a intrinsic width and height, the used width and height are the intrinsic width and height.
2. Otherwise, if the image has an intrinsic ratio and either an intrinsic width or an intrinsic height, the used width/height is the same as the provided intrinsic width/height, and the used value of the missing dimension is calculated from the provided dimension and the ratio.
3. Otherwise, if the image has an intrinsic ratio, the used width is 1em and the used height is calculated from this width and the intrinsic ratio. If this would produce a height larger than 1em, then the used height is instead set to 1em and the used width is calculated from this height and the intrinsic ratio.
4. Otherwise, the image’s used width is its intrinsic width if it has one, or else 1em. The image’s used height is its intrinsic height if it has one, or else 1em.

You can read more about images and their intrinsic dimensions or lack thereof in the <image> entry.