背景に画像を表示：［熱帯魚］aquafish.jp

スタイルシート 2005年08月07日 12:17

トップページにアンソルギーの画像を表示してみました。

backgroundプロパティ（背景の指定をまとめて行う）を利用して、トップページの「What'new!」「Topics」の部分の右上に表示されるように指定。

トップページ以外のページには表示させたくなかったので、divプロパティで任意の箇所を指定します。今回は、「What'new!」「Topics」の部分に表示させるので、メインページのその部分のソースを

<div id="tob_bg">
「What'new!」
「Topics」
</div>

のようにidを指定して、divでボックス化しておきます。

そして、スタイルシートに下記を記述。

#top_bg { background: url(../archives/parts/top_ansorgii2.jpg) no-repeat right top; height: 240px; }

url(画像までのURL)
<$MTBlogURL$>フォルダ/●●.jpgでも構いません。
no-repeat　画像を1回だけ表示させる
right top　画像を表示させる位置（右上）
left,center,rightで横位置を。top,center,bottomで縦位置を指定できます。

画像のサイズが187×225なので、画像が途切れないように、ボックスの高さをheight240pxに指定してあります。これは必要がなければ記述しなくても構いません。

トラックバック

トラックバックURL: