background-imageについて
background-imageは背景に画像を指定するcssプロパティです。
指定した画像は敷き詰められて表示されます。これをcssではリピートといいます。リピートして表示させたときに上下左右のつながりにずれがあると違和感がでます。違和感のないものをシームレスであると言ったりします。シームレスであることはパターン素材の
bodyに背景画像を指定するとして、cssではurl()関数を使い以下のように外部ファイルを指定します。
※ピンクの部分が任意です。
body{background-image:url(../img/img.svg);}
さてこのbackground-imageは、カンマ区切りで複数の画像を指定することができます。画像は重なって表示され、上に記載するものが手前になります。もちろん手前に来る画像が透過情報を持っていないと意味がありません。
body{
background-image:
url(../img/imgA.svg),
url(../img/imgB.svg),
url(../img/imgC.svg);
}
例えば以下を重ねてみます。
するとこうなります。
個別の画像がシームレスになっていればそれぞれの画像サイズをそんなに気にしないでもいいので便利です。ただ指定する画像の数だけサーバーへのリクエスト数が増えるので、気にする人はデータURIスキームで背景を指定するといいでしょう。また上の例でいえばサイズの同じ2つのストライプは一つのファイルにまとめてもいいでしょう。
他にbackground-imageで指定できるものにcssグラデーションがあります。cssのグラデーションは画像という扱いになっているのです。
例えばこんな感じです。
上のものはピンクから透明へグラデーションしています。
コードを書くと以下です。linear-gradient()関数を利用しています。
body{
background-image:
また上にも書きましたがbackground-imageは画像としてデータURIスキームを利用できます。テキストで画像を表現できるので便利です。リクエスト数も増えません。ただし長ったらしいので容量の少ない画像での利用をお勧めします。また説明が長くなるのでこのページでは画像をデータURIへ変換する方法は説明しません(検索するとたくさん出てきます)。
下のものはピンクと透過の市松模様です。
body{
background-image:url("data:image/svg+xml;charset=utf-8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 2 2' preserveAspectRatio='none'%3e%3cpath fill='pink' d='m0 0h1v1h-1zm1 1h1v1h-1z'/%3e%3c/svg%3e");
}
もちろんグラデーションもデータURIスキームも、外部ファイルの指定でやったようにに重ねることができます。すると以下のようになります。
下にコードを記載します。長ったらしく何が書いてあるのか分かりづらいので、複数人がcssファイルを触る可能性がある場合は記述ルールを決めたりコメントを書いてもいいと思います。
body{
background-image:
linear-gradient(90deg,pink,transparent),
url("data:image/svg+xml;charset=utf-8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 2 2' preserveAspectRatio='none'%3e%3cpath fill='pink' d='m0 0h1v1h-1zm1 1h1v1h-1z'/%3e%3c/svg%3e");
}
以上background-imageの説明となります。