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