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の大きさですが、背景にタイル状に隙間なく配置されるため、画像で埋め尽くされる、ことになります。