Image Bullets for Lists
January 20th, 2013
In this tutorial, I’ll be going over how to put your own custom bullet on a list instead of using the ones that CSS offers by default.
The basic list
Let’s start with the default unordered list.
| Preview | HTML | |
|---|---|---|
|
<ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> <li> Item 4 </li> <li> Item 5 </li> </ul> |
Notice that by default, it has extra padding/margin which pushes the list items to the right. It also has a default bullet, which is the disc.
Resetting the list
The first thing we want to do is reset the list by removing all of those styles.
| Preview | CSS | |
|---|---|---|
|
ul { margin: 0; padding: 0; list-style-type: none; } |
When one attribute is put into the margin/padding property, it applies to all sides. We’ve now removed all margins and padding. We also removed the default bullet by setting list-style-type to none.
Add your own bullet
To add your own custom bullet, you actually do it by adding a background to the list item, instead of setting the list-style-type.
| Preview | CSS | |
|---|---|---|
|
ul { margin: 0; padding: 0; list-style-type: none; } ul li { background: url(bullet.gif) left center no-repeat; } |
If you’re not familiar with shorthanding for backgrounds, then take a look at it broken down. The left and right side are exactly the same, but the left side is shorter and easier to write.
| Shorthanded | In full | |
|---|---|---|
|
background: url(bullet.gif) left center no-repeat; |
background-color: transparent; background-image: url(bullet.gif); background-position: left center; background-repeat: no-repeat; |
CSS Explanations:
transparent – If you notice, I didn’t put it in the line on the left. I didn’t have to include it on the right either. By default, backgrounds are transparent, so you don’t need to specify it as a color.
url(bullet.gif) – This is how you put in an image for a background. You use url() and put the image path inside.
left center – The background property positions by left/right top/bottom. In this example, I’m starting the background on the far left, and it’s centered vertically. If you wanted it at the top left corner, you could do left top. You could also mix in pixels to offset it by a certain amount, like left 2px.
no-repeat – By default, backgrounds will repeat both horizontally and vertically. By saying no-repeat, we’re telling it to show it once and not repeat at all.
Now that we have the background, our text is overlapping the image. To fix that, we want to add some left padding.
| Preview | CSS | |
|---|---|---|
|
ul { margin: 0; padding: 0; list-style-type: none; } ul li { background: url(bullet.gif) left center no-repeat; padding-left: 20px; } |
The reason we use padding is because it adds spacing to the inside, which moves only the text and not the list item, keeping the background in place.
Extra tip
Though we’re done, I’ll include an extra troubleshooting tip. If your bullet image is too large, you may end up having it cut off at the top and/or bottom like this.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
In that case, you can add top and/or bottom padding, or you can increase the line-height.
Leave a Reply