In this section, we will learn what the list-style-image property is and how to use it in CSS.

Click here to run the example of list-style-image property.

CSS list-style-image Property Definition and Usage

We use `list-style-image` property to set an image as the marker of items (<li> elements) within an HTML list.

Note: this property can be used for <ol>, <li> and <ul> elements.

CSS list-style-image Property Syntax

list-style-image: none|url|initial|inherit;

CSS list-style-image Property Value

The value for this property is the address of the image that we want to use.

Also, the default value for list-style-image is “none” which means no image should be used for the target list item.

Note: the two global values “initial” and “inherit” could also be used for this property.

Example: list-style-image in CSS

See the Pen list-style-image in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS list-style-image Property Work?

Note: in the example above, besides `list-style-image` we also set the `list-style-type` property. You should know that browsers will first render the image and if that image wasn’t available for whatever reason, then browsers will use the value assigned to `list-style-type` property.

It is recommended that whenever using `list-style-image` property, use `list-style-type` property as the backup plan in case the image wasn’t available or for other situations that render `list-style-image` useless.