×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

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

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

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

background-image: url(★);

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

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

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

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

一回だけ表示。
background-repeat: no-repeat;

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

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

横方向に並べる。
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-repeat: no-repeat;
background-position: right bottom;
ひとつだけ真ん中に表示。
background-repeat: no-repeat;
background-position: center;

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

右側に縦方向で敷き詰め。
background-repeat: repeat-y;
background-position: right;
真ん中に横方向で敷き詰め。
background-repeat: repeat-x;
background-position: center;

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

ひとつの画像を 200px 100px の位置に表示。
background-repeat: no-repeat;
background-position: 200px 100px;
上から 80% の位置に横方向で敷き詰め。
background-repeat: repeat-x;
background-position: 0px 80%;