おはようございます＾＾
前々回背景をオリジナル画像に変える という記事を書いたんですが
オリジナル画像に変えたらそれらをちゃんとした場所に配置しなくてはいけません＾＾
いけませんってか、いけなくもないけど＾＾；
前回の背景の画像をくりかえす という記事で
画像を好きな方向にくりかえすというcssの記述方法を書きました。
/* ---------- background-color : 背景色 ------- */
body{
background-color:#FFFFFF;
background-image: url(背景にしたい画像のURL);
background-repeat:repeat-y;
}
そうです。background-repeat:で、あっちにもこっちにもリピートさせられます＾＾
今回は位置の指定です。
タイトル画像（ヘッダ背景）を好きな位置に配置する
と基本は同じです。
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・同じです＾＾；
でもあえて書きます。
background-position:center; （これは真ん中）
このようなものを上記のcssの中に放り込んでさしあげます。
/* ---------- background-color : 背景色 ------- */
body{
background-color:#FFFFFF;
background-image: url(背景にしたい画像のURL);
background-repeat:repeat-y;
background-position:center;
}
background（背景）のposition（場所）はcenter（真ん中）
ということなんですが
その上に
background（背景）はrepeat（くりかえす）y（縦に！）
という記述もあるので
こうなります。
あ、トマトに飽きたのでピーマンにしてみました。
私は肉詰めが大好きデス。
上のほうのピーマンが切れていますね。
これはどうしてでしょう？
もしbackground-repeat:repeat-y;（縦にくりかえす）を
background-repeat:no-repeat;（くりかえさない）に変えたらこうなります。
これを見るとわかるように
background-repeatはbackground-positionで指定した場所から始まります。
だから上が切れようがおかまいなしになってしまってしまいます。
指定できるものは
background-position:top; （上）
background-position:bottom; （下）
background-position:left; （左）
background-position:right; （右）
background-position:center; （真ん中）
だけではなく
background-position:right top; （右上）
background-position:right bottom; （右下）
のような指定もできます。
/* ---------- background-color : 背景色 ------- */
body{
background-color:#FFFFFF;
background-image: url(背景にしたい画像のURL);
background-repeat:repeat-y;
background-position:right top;
}
だとこのようになります。
右上が始発点になっているので上のピーマンも切れていません。
background（背景）はposition（位置）right top（右上）からrepeat-y（縦にくりかえす）
という記述をしているからです。
background-position:right bottom;（右下）
background-repeat:no-repeat;（くりかえさない）
を指定したら
こうなるので
ワンポイントっぽくてかわいいと思います＾＾
このほかにも
background-position:20% 50%;（左から20%上から50%）
background-position:100px 50px;（左から100px上から50px）
のような指定もできます。
%は相手のブラウザのサイズに合わせた位置になるので使いようによっては便利です。
この要領で色々組み合わせて画像を配置してください＾＾
ちなみに、私のブログの背景は
（クリックで拡大）
このような850px×50pxの画像を真ん中から縦にくりかえしてます。
background-repeat:repeat-y;
background-position:center;
です。
そして背景画像と背景色を合わせるために
background-color:#CC9966;
としています。
このブログのメイン部分のまわりの影は実は背景画像だったんですね
(＠＾▽＾＠)ノ