CSS List Style Image

« Previous Tutorial Next Tutorial »

In CSS, you can also use an image as a lists item marker. The image used as a list item marker should be smaller in size than the size of the list item.

You can use an image as a list item marker for both ordered and unordered list.

To display an image as a list item marker, you need to use the list-style-image property. You need to given the Uniform Resource Locator (URL) of the image that you want to use as a list item marker in the list-style-image property.

The syntax used to declare the list-style-image property is as follows :

list-style-image: <url> | none;

In the preceding syntax, <url> indicates the URL source for the list-marker graphic; whereas, none specifies that no list-marker is used for the list item.

CSS list-style-image Example

Let's look at the following example to understand it:

<!DOCTYPE html>
ul {
    list-style-image: url('coaSqr.jpg');



Here is the output of the above CSS example:

css images list property

« Previous Tutorial Next Tutorial »


Quick Links
Signup - Login - Give Online Test