background は、背景色や背景画像（並び方、スクロール、位置）を一度に指定できるプロパティです。
li 要素にこのプロパティを設定すると、リストマーク（マーカー）を背景画像で指定することができます。
ul {
list-style-type: none;
}
li {
background: url(image/mark.gif) no-repeat;
padding-left: 20px;
}
| background | 背景画像と並び方を指定します |
|---|
【指定方法】
background: url(image/mark.gif) no-repeat;
url( ) … ( ) 内に画像のファイルを指定
no-repeat … 画像を1つだけ表示する指定（敷き詰めない）
※background プロパティに関する詳細は、「背景の設定をひとまとめに行う」をご覧ください。
■標準のマークを消す
マークの表示が重複しないように、ul 要素に list-style-type: none; を指定して標準のマークを消しておきます。
■パディングを設定する
マークの表示領域を作るため、li 要素に padding-left を指定します。
【画像の大きさに注意】
マークに使う画像が大きいと、ブラウザの文字サイズを小さくした際に、マークの一部が欠けてしまう場合があります（背景画像のため）。
この問題は、li 要素に padding-bottom を指定することで、ある程度は回避することができます。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
background: url(image/mark.gif) no-repeat;
padding-left: 20px;
}
-->
</style>
</head>
<body>
<ul>
<li>Webディレクター</li>
<li>Webデザイナー</li>
<li>Webプログラマー</li>
</ul>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
