TIPS - CSS: Professional Techniques for Modern Layout - page 94

Figure 3-18: Bullets in the background.

Because you can place the image wherever you want in the background, you have a lot more
l exibility than plain old list-style-image permits. You do need to remember to add in
some let padding, of course—otherwise, the element content will sit on top of the back-
ground image!

96

If you want to line the image up with the i rst line of text, there is a little bit of an art to it, and
you can't absolutely guarantee to-the-pixel alignment with, say, the baseline of the i rst line of
text. You can get very close, and in many cases will be in the right place, but it's never a sure
thing. h is is one of those cases where you have to accept the potential l aws, or else try a
dif erent approach.

A benei t of this particular approach is that you aren't constrained to the i rst line of text. You
can have the markers be vertically centered compared to the whole list item, even if it goes to
multiple lines. Combined with intervening borders, as depicted in Figure 3-19, this can be a
nice ef ect.