There are several ways to uniquely decorate lists. Your first and best option is to use border or generated content, which we have previously discussed. But on occasion the decoration is so unique that you have to make it yourself and add it as a bitmap, using list-style-image or background-image. (Because the graphic will be used for every list item, they are most appropriately applied to unordered lists.)

The trickiest part to making an image that will be used to decorate a list are determining its dimensions. Too high, and the image appears out of alignment with its associated list item. Too large an image may also increase leading for the list as a whole. As a rough guide, I make a decorative list image around 32 pixels high, with the bottom of the graphic touching the lower edge of the canvas. (This compensates for the fact that if you use the list-style-image approach, the bottom of the image will be parallel with the baseline of the list item text, and there is no way to adjust the position of the bitmap under that method.)

In PhotoShop, a typical bitmap list decoration will look like this, magnified approximately 400%:

At this point, you have two choices. First, you could apply the image as a list-style-image, automatically replacing any defined list-style-type as the decoration for the list. For example, to add the image triangle.png located in the images folder as the leading marker to an unordered list with an id of decorated, we would use the following code :

ul#decorated {
	list-style-image: url(images/triangle.png);
}

Alternatively, you could apply the image as a background-image to each list item, turning off tiling and any previous list-style-type applied:

ul#decorated li {
	background-image: url(images/triangle.png);
	background-repeat: no-repeat;
	list-style-type: none;
}

If taking the second option, you would alter the location of the image relative to the text using background-position. You may find that you have to use padding on the list item in order to have a large enough “window” to see the background image, depending on its position.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.