codescracker
css

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>
<html>
<head>
   <title>CSS List Style Image Example</title>
   <style>
      ul { list-style-image: url('sun.jpg'); }
   </style>
</head>
<body>

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

</body>
</html>

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.

CodesCracker