背景を彩る

background-imag プロパティ

「background-imag: url(画像のパス);」で背景画像を設置する。
画像が表示されないことも考えて、同系色の背景色を設定しておく。

通常では画像が繰り返えされるようになっている。
このページでは縦300px, 横300pxの画像が繰り返されている。

そのままだと見えにくいので、背景画像を透過させて薄く表示している。

background-repeat プロパティ

「background-repeat: repeat-x;」とすることで横方向だけに繰り返して表示される。

値を「repeat-y」に変更すると縦方向だけに繰り返しが適用される。

background-sizeプロパティ

背景画像のサイズを指定する。どれも画像は繰り返さないように設定している。

サイズ幅を900pxとしたページに適用させていく。（水色がページの範囲を示している。）

background-position プロパティ

背景画像を表示する開始位置を指定する。「横方向, 縦方向」の順で記述する。

値はpxなどの数値もしくは、「left,right,top,bottom」などのキーワードで指定する。

縦方向に揃える場合は、囲んでいる要素に高さが指定されている必要がある。

画像を上部、中央に配置した例

background-position: center top;（半角スペースで区切る）

画像を右端、下部に配置した例

background-position: right bottom;

複数の画像を設置

値を入力するとき「,」で区切って指定していく。