place

２つスタイルシート作ったけど
ちょっと・・あじけない。
そんな気がしたので
ヘッダー部分に画像でも。
使用したのは右上の画像。
100×100（ピクセル）の物。

スタイルシートの記載方としては

と、いれればそれだけで背景の指定は完了なのですけど、
これだけだと少し崩れるし余分な表示とか出てきます。
取り敢えず横方向にだけ並べるように
（要するに縦方向は繰り返さない）

と追加。

この２行で画像の表示と横方向への繰り返しは完了。
ただこのままだとデフォルトのテンプレートのサイズが反映されるので画像の大きさによっては画像が途中で切れていたり又は寸足らずで背景色がはみ出したりするのでマージンとか調整した方が良いとかと。
今回は H1要素 の padding を少し調整しました。（デフォルトは20px）

今回の画像の縦が100ピクセルの場合は 17px で指定すれば丁度画像と背景の縦幅は揃うと思います。

んでも背景の色が少し出ていた方が見栄えが良いかなぁと今回は 18px で指定して画像の下にラインが出るようにしました。

以下が今回のヘッダー部分のソースです。

/*******************************************************
header * title
*******************************************************/
#header {
background:#f63;
background-image: url("http://track-back.net/fault/img/3/ff05.gif");
background-repeat:repeat-x;
margin:0 0 30px 0;
}
H1 {
padding:18px;
margin:0px;

/****変更箇所はここまで*************
***********************************/

背景にもっと横幅の大きい画像使う場合は
repeat-x を no-repeat と指定すれば１枚のみ表示されます。

ただ、画像のアップロードが横幅365ピクセル以下じゃないと出来ないのでもっと大きいのは別のサーバー等から呼び出さないといけないと思います。

それとファイルサイズ200kb以下 ってことだけど、そんな大きな容量の物使うと重くて重くて閲覧者がとてもストレス溜まるのでお勧めできません。せめて50kb以下に（願）


今回使わせて頂いた画像は素材屋さんで拝借してきたものですのでこのblogからの転用は止めてね（はぁと）

ここに↓あります。

FULL HOUSE
http://hearts69.hacca.jp/about/jamjam.html