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
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.