左にならんだビーズのラインと、右上の花の壁紙はそれぞれ違うファイルです。
というわけで2種類の背景を使って、デザインの幅を広げてみましょう～。
まず用意するもの。
●ベースにひくための画像
これは横長・縦長・敷き詰めるタイプなんでもOKです。
このページだと、左のビーズのがこれです。
●上にのせる画像
ベースの画像とぶつからない、透過済みの画像、
もしくは四角形の画像にしましょう。
●外部から呼び出しOKなサーバ
アメブロの画像アップロードで勝手にリサイズされてしまうときは、
外部呼出しのできるサーバを借りましょう。
画像が用意できたら、cssを編集します。
今回いじるのは
/* ----------------------- common ----------------------- */
にある、下の３つ。
body#mainIndex {
color: #444444;
font-size: small;
line-height: 130%;
margin: 0;
padding: 0;
background: #ffffff url('ベースになる画像のURL') repeat scroll;
}
#frame {
text-align: center; ←body#mainIndex にあった指定をここにカット＆ペースト
background: url('上にのせる画像のURL') no-repeat scroll 100% 0%;
}
#subFrame {
margin-right: 5px;
width: 88%; ←#frameにあった指定をここにカット＆ペースト
margin-left: auto; ←#frameにあった指定をここにカット＆ペースト
margin-right: auto; ←#frameにあった指定をここにカット＆ペースト
text-align: left; ←#frameにあった指定をここにカット＆ペースト
}
簡単に背景の指定の説明を。
--------------------------------------------------------
background: #ffffff url('ベースになる画像のURL') repeat scroll;
--------------------------------------------------------
これは
ベースになる画像を繰り返し表示し、スクロールされるのと一緒に動く
という指定です。
もし、スクロールしても画像は常に一定の場所に表示されたままにしておきたければ、「scroll」の部分を「fixed」にしましょう。
--------------------------------------------------------
background: url('上にのせる画像のURL') no-repeat scroll 100% 0%;
--------------------------------------------------------
こっちは
上に載せる画像を繰り返さず、右上に配置してスクロールされるのと一緒に動く
という指定です。
配置する場所を変えたいときは「100% 0%」の数値を変更しましょう。
この数値は「左端からの距離 上端からの距離」の順番で、マイナスの数値も指定できます。
また、単位にはpxなども使えます。
ベースとのせる画像の組み合わせ配置パターンはたくさんあるので、いろいろ試してみてください♪
現在の私のcssはこちら。
基本的に背景に画像を使っているところ以外は「background」の指定を全部削除しています。