It's not quite a background, but you can also use images for list items for your HTML5 and CSS3 web page. Sometimes, you might want some type of special bullet for your lists.
On this page, several varieties of peppers have been listed. For this kind of list, a custom pepper bullet is just the thing. Of course, CSS is the answer:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>listImages.html</title>
<style type = "text/css">
li {
list-style-image: url("pepper.gif");
}
</style>
</head>
<body>
<h1>My Favorite Peppers</h1>
<ul>
<li>Green</li>
<li>Habenero</li>
<li>Arrivivi Gusano</li>
</ul>
</body>
</html>
The list-style-image attribute allows you to attach an image to a list item. To create custom bullets:
Begin with a custom image.
Bullet images should be small, so you may have to make something little. The image will be trimmed to an appropriate width, but it will have all the height of the original image, so make it small.
Specify the list-style-image with a url attribute.
You can set the image as the list-style-image, and all the bullets will be replaced with that image.
Test the list in your browser.
Be sure everything is working correctly. Check to see that the browser can find the image, that the size is right, and that everything looks like you expect.
If you don't want to use an image, CSS has a number of other styles you can apply to your list items. Use the list-style-type rule to set your list to one of many styles. Look at official CSS documentation for a complete list, but the most commonly used style types are disc, circle, square, decimal, upper-roman, lower-roman, upper-latin, and lower-latin.
Note that you can apply a numeric styling to a list item in an ordered or unordered list, so the distinction between these list types is less important than it used to be.
