CSS list-style-image Property
The list-style-image property is used to put an image instead of the list item marker.
If the image has intrinsic width and height, they will be used for the marker size. If the image has an intrinsic ratio and either an intrinsic width or height, the missing dimension will be calculated from the provided ratio and dimension.
The list-style-image property is applied to list items and elements with display set to "list-item". By default, this includes <li> elements. It also can be set on the parent elements: <ol> or <ul>.
INFO
The list-style-type property will be used when the image is not available to be shown.
| Initial Value | none |
|---|---|
| Applies to | List items. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.listStyleImage = 'url("image.jpg")'; |
Syntax
Syntax of CSS list-style-image Property
list-style-image: none | <url> | image-set() | initial | inherit;Example of the list-style-image property:
Example of CSS list-style-image Property with none value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: none;
}
</style>
</head>
<body>
<h2>List-style-image property example</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Result
Example of the list-style-image property with an attached source URL of the image:
Example of CSS list-style-image Property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: url("https://www.w3docs.com/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
}
</style>
</head>
<body>
<h2>List-style-image property example</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| none | Means that there won't be any image shown. Instead of image, the list marker which is defined with list-style-type will be shown. It is the default value of this property. | Play it » |
<url> | Is used to give the source URL of the image which will be used as list item marker. | Play it » |
| image-set() | Specifies a set of images that can be used depending on the rendering environment (e.g., screen resolution). | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parent element. |
Practice
What is the function of the 'list-style-image' property in CSS?