List style image

Use custom bullet with list-style-image.

Use your own marker

Sometimes you want your own graphic as the marker instead of the standard disc or square. The list-style-image property does this. You give an image address and the browser stamps it in front of each item.

If you also set list-style-type, it acts as a fallback when the image fails to load. That fallback keeps the list from looking bare if the image is missing.

Call it with url()

The image address goes inside the url() function: list-style-image: url('img/star.png'). Quotes are optional; single, double, or no quotes all work. The path can be relative or absolute.

The image is not scaled automatically; a large file breaks the list layout. That is why a small, marker-sized image matters.

Exercise Add star markers to the gallery list

Write a ul.gallery class selector and assign list-style-image: url('star.png'). Each item will then show the star image in front.

Show example solution

/* star image for the gallery list */
ul.gallery {
  list-style-image: url('star.png');
}

Test yourself

Which is a valid declaration?
```
ul {
  list-style-image: ?;
}
```
- list-style-image: img/star.png
- list-style-image: src('img/star.png')
- list-style-image: url('img/star.png')
- list-style-image: image('img/star.png')
Show answer

list-style-image: url('img/star.png') — Correct. The image path goes inside the url() function.

Make a star image the marker

ul.gallery {
  ____;
}

Show answer

ul.gallery {
  list-style-image: url('star.png');
}

Match each property to its job

list-style-type

Shape of the marker
list-style-position

Marker inside or outside
list-style-image

Custom image marker

Next lesson: Link states

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies