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 illustrates list-style-image in CSS:

<!DOCTYPE html>
   <title>CSS List Style Image Example</title>
      ul { list-style-image: url('sun.jpg'); }

   <li>CSS List Style Image Tutorial</li>
   <li>CSS List Style Image Example</li>
   <li>CSS List Style Image Test</li>


Here is the sample output produced by the above CSS list-style-image example code that shows how to set image as a marker using CSS:

css list style image

CSS Online Test

« Previous Tutorial Next Tutorial »

© Copyright 2021. All Rights Reserved.