模様替えでやったことその3　背景画像編

Top

模様替えでやったことその3　背景画像編

今回は、TOPバナーに画像を使わないで
1枚の大きな画像を使ってレイアウトしました。

やり方はこんな感じです。

ComComは、幅を固定してセンター揃えにしています。
この方法はこちらで紹介しています。

iBlog覚え書きその3

この部分に背景を設定します。

当然ですが、適当に背景画像を作りましょう。(^_^)
幅は上記で作った #all で指定した幅より5pxくらい大きめのがいいかも知れません。

こんな感じの1枚画像を作りました。

できたらアップして

#all {

****

}

に、背景画像の指定を追加します。

background-image:url(背景画像のパス);

背景画像のパス　（ComComサンプル）
例：background-image: url(http://mitene.tv/comcom/images/back.jpg);

画像を繰り返して並べたくない場合は
background-repeat: no-repeat;
も追加して下さい。

これだけです。

画面全体に背景を使う場合は、

body {
****
}

に指定すればいいですね。
ちなみに、横ストライプの背景はここで指定しています。

次にbannerに、背景色や画像を指定していたらはずします。
テンプレートの<div id="banner">の部分を

<div id="banner">
 
</div>

上記のように、空のスペース記号を入れた方がいいです。

ちょっと、ブロードバンド向けの方法ですが(^^ゞ
すっきりした感じにできました。

Posted: Tue - May 4, 2004 at 02:36 PM