占ツクCSS辞典【全体公開】

横メニューの画像 ページ30

同じくドット画像のように画像を敷く方法をご紹介します。

#navigation h2{
background-image:url(画像URL) !important;
color:メニュータイトルの文字色;
}

#navigation h2 a:link,#navigation h2 a:visited{
color:メニュータイトルのリンク色1;
}

#navigation h2 a:hover{
color:メニュータイトルのリンク色2;
}

画像URL、色の部分を置き換えてご使用ください。



敷き詰めるタイプの画像なら↑のタグで十分ですが、横長の画像を横幅ぴったりに合わせる方法として、

#navigation h2{
background-image:url(画像URL) !important;
background-size:100% auto;
background-position:center center !important;
color:メニュータイトルの文字色;
}

があります。

作品タイトルの色→←横メニューの色

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す