画像をタイル状に配置する


bodyのbackgroundで画像をタイル状に配置してみましょう。

画像を隙間なく配置する

スタイルシートのソースは、こういう書き方になります。
小さなテクスチャ画像などを繰り返し配置することにより、画面全面をテクスチャで覆うことができます。

cssソース

/*====参考====*/
body {
    background: #e6e6e6 url("./images/2020-01-29_.png") repeat;
}

ここで使った画像はここからダウンロードできます。
ダウンロードしたら解凍してホームページフォルダーに入れておきましょう。

それでは見ていきましょう。
値は#e6e6e6 url(“./images/2020-01-29_.png”) repeat;となっていますね。

urlとは、インターネットで使う[場所]という意味で(””)の中に画像のパスを書きます。

パスは絶対パスと相対パスを参照。

repeatは繰り返す、という意味でタイル状に隙間なく配置されます。
これがデフォルトの状態なので、repeatは省略できます。

urlの前に#e6e6e6がありますが、これは画像とよく似た色を書いておきます。

まずよく似た色が表示され、その上に画像が表示されることになりますので、画像が何らかの理由で表示されなかった場合、先に表示された色が残ります。
画像が表示されなかった場合にも、似通ったイメージ、色合いを保つことができます。

2020-01-29_.pngは大きさが縦横100pxの大きさですが、背景にタイル状に隙間なく配置されるため、画像で埋め尽くされる、ことになります。

次は画像を1枚表示する

  1. 背景に色を付ける
  2. 背景にグラデーションをかける
  3. 画像をタイル状に配置する
  4. 画像を1枚表示する
  5. 画像で横ラインを引く
  6. 画像で縦ラインを引く
  7. 複数の画像を配置する
  8. 画像にグラデーションをかける