How to Use a Background Image as a List Bullet in CSS

With a simple CSS rule, you can use any background-image you would like as a bullet for an unordered list. Here is how to do it.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• A text editor or an HTML editor

1. 
    
   An unstyled list

   The image features a normal bulleted list before any CSS rules are applied to it.

2. You don't have to change anything about the HTML that created the list. You simply use CSS to change its appearance.

3. Prepare the graphic that you will use as a background image. In this example I used a graphic that is 15 pixels wide and 48 pixels in height. The image is vertically centered in the center of the 48 pixels. It's important to center the graphic and make the image taller than you expect to need. You'll see why in a moment.

4. Write the CSS rules that will add the graphic to your list. With the selector being LI, you need to set the list-style to none. That removes the normal bullet. Next add a rule for the LI background. Give the URL of the image, set it not to repeat, then position it at the left horizontally and at the center vertically. Finally, add some padding-left to make room for the graphic to the left of each list item.
   
   Here's the CSS rule:
   
   li {
   list-style: none;
   background: url(bullet.gif) no-repeat left center;
   padding-left: 20px;
   }

5. 
    
   The styled list

   You may also want to manipulate the placement of the entire list in relation to the left side of its container or in relation to the position of each list item.
   
   Here's a rule I used in this example:
   
   ul {
   padding: 5px;
   }
   
   The image shows the finished list.

6. 
    
   Enlarged text size

   I promised to explain why the graphic should be larger in height than you expect to need. Many users must increase text size on web pages in order to read it. You want your graphic to stay in place even when the text is enlarged. As long as the list items don't get so big they require two lines to display, the background image will stay in position. See the image for a view of the list enlarged three times.

Tips & Warnings

• There is a method of using a graphic bullet in a list item that replaces the normal bullet with an image using the list-style property. Using the list-style property to add a graphic loads the image into the HTML where it might be given alt text. Since the bullet is merely decorative, it is better to use this example, putting it on the page as a background image so there is no issue as to whether or not to give the image alt text.