ちゃきん。無料HPイラスト素材の小箱

CSS 背景画像の配置・敷き詰め方法

保存した画像素材は CSS や HTML で指定しないと使えません。
というわけで、ここでは一応さらっと、CSS（スタイルシート）での
ホームページの壁紙素材の設定方法を書いておきます。
詳しいことは専門のサイトでご確認ください。
（おすすめCSS,HTML解説サイト⇒ 【HTMLタグの簡単検索】TAG index）

まずは基本、『背景に画像を表示する。』から。
スタイルシート内の壁紙をあてたいブロック（class や id など）に

background-image: url(★);

の一行を入れればそのブロックに背景として壁紙が表示されます。
（ ”★”には画像の url を挿入。）
他に何も設定してなければ、画像がびっしりと敷き詰められているはずなので、
敷き詰めタイプの壁紙ならこれだけでOK。

ひとつだけ表示する。縦・横に敷き詰める

壁紙が敷き詰めタイプではなくワンポイントで使うようなタイプの場合

background-repeat: no-repeat;
を入れれば、画像が一度だけ表示されます。

横方向にだけ敷き詰めたいときは
background-repeat: repeat-x;

縦方向にだけ敷き詰めたいときは
background-repeat: repeat-y;
です。

背景画像の表示位置を細かく設定

背景画像はそのままだと常に左上を基点に表示されますが、
background-position: を指定することで自由に配置できます。

横方向の設定は left（左）、center（中央）、right（右）、
縦方向の設定は top（上）、center（中央）、bottom（下）
が用意されていて、横方向 半角スペース 縦方向（x y）の順で指定します。

例えば、
background-position: right bottom;
なら 右下が基点で、

background-position: center;
なら、ブロックの中央に表示されます。

この background-position と background-repeat を組み合わせれば、
ブロックの右側だけとか下の部分にだけ背景を表示できます。

また、数値（pxや%など）で細かく表示位置を設定することも出来て、
ブロックの左上を基点に x y の順で指定します。
background-position: 200px 100px;
なら、左から 200px 上から 100px の位置に画像を表示という具合。