Free web tools

List style image

The list-style-image property will replace the list-style-type marker (bullet point) with the image specified if it is available. This allows you to customise your own list markers. Take this rather unimaginative example of an orange pentagon marker:

ul {
    list-style-type:bullet;
    list-style-image:url('/images/orange-bullet.png');
}

This CSS will apply to all unordered lists, however list-style-image can also be applied to ordered lists. Notice that we've set list-style-type still. This means if the image fails to load the browser will fall back to the bullet marker. Here is the output of this CSS code when applied to an unordered list.

• First item
• Second item
• Third item

Now whilst this works in replacing the default list marker with our own image, it doesn't give us much control. We can't set the position of the image for example. As a result there is another way to achieve a similar result but giving us much more control - thist technique sets a background to the list item element.

Take the following standard unordered list HTML:

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

We're going to achieve the same effect as above but by using the background-image property of the <li> element. Firstly we have to remove any bullets from the list using CSS:

ul {
    list-style-type:none;
}

Our list now looks like this:

• First item
• Second item
• Third item

Ok, now we add a background to each list item:

ul {
    list-style-type:none;
}
ul li {
    background-image:url('/images/orange-bullet.png');
}

• First item
• Second item
• Third item

It looks nasty - but it is simply result of the background repeating. This is quickly removed by setting background-repeat to no-repeat:

ul {
    list-style-type:none;
}
ul li {
    background-image:url('/images/orange-bullet.png');
    background-repeat:no-repeat;
}

• First item
• Second item
• Third item

Okay, now we have to move the text to the right a bit. This is done by using padding-left, the amount of padding to use depends on the size of the text, how big your bullet image is and how much space you want between the bullet and text. In this example 20px should suffice:

ul {
    list-style-type:none;
}
ul li {
    background-image:url('/images/orange-bullet.png');
    background-repeat:no-repeat;
    padding-left:20px;
}

• First item
• Second item
• Third item

Lastly we position our bullet image, in this example we want it moved down a couple of pixels:

ul {
    list-style-type:none;
}
ul li {
    background-image:url('/images/orange-bullet.png');
    background-repeat:no-repeat;
    padding-left:20px;
    background-position:0 5px;
}

• First item
• Second item
• Third item

Our list is now complete - it has taken a bit more CSS then before but we have far more control over our bullets. We can however make the CSS shorter using the shorthand background property which has this syntax:

background: background-color background-image
background-repeat background-attachment background-position

We haven't used background-attachment in our "long" CSS because the default value, scroll, is fine. Background colour in this example will be white. So our final CSS ends up as:

ul {
    list-style-type:none;
}
ul li {
    background:white url('/images/orange-bullet.png') no-repeat scroll 0 5px;
    padding-left:20px;
}

• First item
• Second item
• Third item