さて、今まではCSSだけでナビゲーションを作ってきましたが、CSSだけではやれることに何かと制限が多いので画像を取り入れたナビゲーションを作ってみます。

今回は前回使ったCSSナビゲーションに背景の画像を入れて見栄えをもうちょっと凝った感じに変えてみましょう。
今回のポイントは#menu06 li a のbackground: に url(../img/navi-bg01)で画像を指定して、 repeat-x;で画像を横にリピートさせているところにあります。

#menu06 ul {
 width: 600px;
 margin-top: 2em;
 border-left: 1px solid #999;
}
#menu06 li {
 display: inline;
}
#menu06 li a {
 background: url(../img/navi-bg01.jpg) repeat-x;
 width: 75px;
 height: auto;
 padding: 3px 10px;
 float: left;
 border-top: 1px solid #999;
 border-right: 1px solid #999;
 border-bottom: 1px solid #999;
 display:block;
 text-decoration: none;
 font-size: 0.8em;
 font-weight: bold;
 color: #fff;
}

サンプル

これでかなりできることに幅が出てきたんじゃないかと思います。