background: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

background は、背景色や背景画像（並び方、スクロール、位置）を一括で指定するプロパティです。

このプロパティをli要素に対して設定すると、リストマーカーを背景画像で表示することができます。


ul {
list-style-type: none;
}

li {
background: url(mark.gif) no-repeat 0 1px;
padding-left: 20px;
}
プロパティ名 値 説明
background 以下を参照 背景画像、並び方、表示位置を指定

指定方法

background: url(mark.gif) no-repeat 0 1px;
  • url( ) … ( ) 内に画像のURIを指定 （背景画像の指定）
  • no-repeat … 背景画像を1つだけ表示 （並び方の指定）
  • 0 1px … 左からの距離と上からの距離を指定 （表示位置の指定）

表示位置を指定すると、マーカーの位置を微調整することができます。（微調整する必要がない場合は、この値を省略しても構いません）

上記の他に、以下の設定が必要になります。

通常のマーカーを消す
マーカーの表示が重複しないように、ul要素に対して list-style-type: none; を指定しておきます。
左パディングを設定する
マーカーの表示領域を確保するため、li要素に対して padding-left を設定します。

画像の大きさに注意

マーカーに使用する画像が大きいと、ブラウザの文字サイズを小さくした際に、マーカーの一部が欠けてしまう場合があります。（マーカーを背景画像で表示しているため）

［一部が欠ける例］

この問題は、li要素に対して padding-bottom を設定することで、ある程度は回避することができます。

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

ul {
list-style-type: none;
}

li {
padding-left: 18px;
padding-bottom: 3px;
background: url(mark.gif) no-repeat 0 1px;
}

</style>

</head>
<body>

<ul>
<li>リスト項目A</li>
<li>リスト項目B</li>
<li>リスト項目C</li>
</ul>

</body>
</html>
表示例
  • リスト項目A
  • リスト項目B
  • リスト項目C