Tutorial 1 - Background images for bullets

Step 6 - Position the image

"Background-position" is used to position the images so that they line up with the text. In this case "0.4em" is used. These units refer to the images position from the "left" and "top".

The top position can be set to 50%, which will make it sit in the middle of the list item. However, this does not look good if list items wrap over two or more lines, as the image will be centred between the lines. The safest method is to define the top position by em's. Using this method, the images will always stay in position with the text no matter what font size the user specifies. The actual measurements used for "left" and "top" will depend on the image.

The images are now lined up horizontally with the content. However, the content is sitting over the top of the images.

Go to Step 7 →

list-style-type: none;
padding: 0;
margin: 0;

background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 0 .4em;

<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
Other Max Design articles and presentations
Associated with webstandardsgroup.org