背景1 は出来ましたか？
今度の「CSS編集用デザイン」では背景を入れられるところがたくさんあります
いままでの「ベーシック」などの場合は・・CSS 背景3
この記事で説明していますが・・・ body にしか背景を設定できません
↑今まではこんな感じ・・・
bodyにしか背景を入れられませんので前の記事で説明した2枚の背景画像は1枚にしてから設定しています
↑こんどの「CSS編集用デザイン」はbodyのほかにもskinBody・skinBody2・skinBody3などにも背景画像を入れられるのでやろうと思ったらすごく凝った背景も案外簡単に設定できちゃいます・・
で・・・・ その前に
背景のCSSではぜったいに使うbackground プロパティについて簡単に説明・・・
background-color
背景色を指定(何も指定しなければ透明)
background-color:#000000;/*黒い背景色*/
CSS初期状態で背景色が設定されているのを透明にするには・・
background-color:transparent;/*透明*/
background-image
背景に画像を指定
background-image: url(画像のURL);
※background-imageの方が上に表示されます
background-color: #000000;/*背景色*/
background-image: url(画像のURL);/*背景画像*/
こうした場合・・・画像が透過していない限り背景色は見えませんので
background-color: #000000; この行は不要です
background-repeat
背景画像の繰り返しを指定
background-repeat:no-repeat;/*繰り返さない*/
繰り返ししない（指定した画像が1個だけ表示される）
background-repeat:repeat-x;/*横に繰り返し*/
横方向だけに背景画像を繰り返し
background-repeat:repeat-y;/*縦に繰り返し*/
縦方向だけに背景画像を繰り返し
background-repeat:repeat;/*繰り返す*/
縦横方向に繰り返して表示（指定した範囲の全体に表示）
何も指定しなければ縦横方向に繰り返されるので普通は使いません
background-position
背景画像の（基準点からの）位置を指定
何も指定しなければ左上端（left top または 0 0 の状態）
値を2つ指定する場合は（左からの）水平位置と（上から）垂直位置の順で半角スペースで区切って指定します
水平位置はleft,center,right 垂直位置top,center,bottomで指定
background-position:left botom; /*左下に表示*/
background-position:right center; /*右端の中央に表示*/
% で指定
background-position:0% 100%; /*左下に表示*/
background-position:100% 50%; /*右端の中央に表示*/
水平位置のleftは0% centerは50% rightは100%
垂直位置のtopは0% centerは50% botomは100%
% 指定の場合は 10% とか 33% とかleft,center,rightやtop,center,bottomで指定するより細かな設定が出来ます
px で指定
background-position:10px 100px;基準点から右に10px上から100pxの位置
注意！
bodyなどに設定する場合は横の位置に注意します
見ている方のディスプレイによって表示位置が違います
わたしのように古いディスプレイの左から100pxや15%と新しいワイド画面のディスプレイの左から100pxや15%は違うってわかりますよね・・・
（同じディスプレイでも解像度によっても違ってきます）
↑メモの画像はbackground-position:0% 70%;/*左端で上から70%*/で設定しています
もっとブログから離れて見えている方もおられると思います・・
どのディスプレイで見ても同じ位置はcenterまたは50%で指定した場合だけです（厳密には違うのですが意図していることはディスプレイの中央ってことなので・・）
値を1つだけ場合は水平位置を指定したことになり垂直位置の値にはcenter(50%)が自動的に設定されます
background-position:left; と background-position:left center; は同じ
なので・・画面中央に配置する場合は
background-position:center; これで良いわけです（background-position:center center;）
background-positionを使う場合はbackground-repeat:no-repeat;で画像を1つだけ表示にする必要もあります
background-attachment
スクロール時に背景画像をその位置に固定されたままにするかスクロールに伴って移動するか指定
何も指定しなければスクロールすれば背景画像も移動
background-attachment:fixed;/*位置固定*/
まとめて1つで書いちゃうことも出来ます
background-image: url(画像のURL);
background-repeat:no-repeat;
background-position:10px 50px;
↑上と↓下はまったく同じ設定のことです
background: url(画像のURL) no-repeat 10px 50px;
では・・・ 次回はもう少し背景を入れてみたいと思います