cssで背景画像を設定（background-image）するとき、2枚設定出来たらな～と思う事って結構ありますよね。

わたしが特にそう思うのは上と下だけちょっと特殊で繰り返しの効かない背景画像で、真ん中部分は繰り返し可能な背景画像を入れたい、というとき。

中身が可変長のコンテンツだと真ん中の背景画像だけ繰り返しにして作る事って多いですよね。

てことでここではbackground-imageに2枚の背景画像を設定できる！ということを紹介したいです。

 

2枚と言わず3枚、4枚…

いきなり設定方法から。といってもただ複数かくだけなんで超カンタン。

 

css

background-image: url("1.png"), url("2.jpeg"), url("3.svg");
background-size: 100%, contain, cover;
background-position: center center, left top, right bottom;
background-repeat: no-repeat, no-repeat, no-repeat;

 

こんな風にそれぞれ並べて書けばいいだけ！画像ファイルの種類も例みたいにごちゃまぜOK。

上の例だと「1.png」「2.jpeg」「3.svg」ていう3つの背景画像を設定しています。

んでそれぞれ1.pngは100%のサイズ、2.jpegはcontainしてねー！、3.svgはcoverでお願い！という指定になってます。

positionやらrepeatやらも同じでそれぞれの背景画像にそれぞれ表示場所、リピートの有無を設定してます。

ね、めちゃめちゃ簡単ですよね。むしろ簡単すぎてあやしいくらい簡単。でもこれで1つの要素に2枚3枚と背景画像を設定できます。

 

注意点

background-imageで複数画像を設定するときの注意点が1個だけ。

それは並び順です。

 

background-imageに限らず、なんとなく複数設定したときの並び順って下に行くほど上にくるイメージありません？最後に設定した方がより重ね順が上にくるイメージ。

ワードやら画像編集ソフトとか、後から追加した画像の方が上にかぶさってくるからそのイメージが強いのかもしれませんね。

でもbackground-imageは逆！最初に設定した画像ほど上にきます。これ要注意。

つまりさっきの例だと、「background-image: url("1.png"), url("2.jpeg"), url("3.svg");」と書いてるので、

  • 一番上：1.png
  • 真ん中：2.jpeg
  • 最背面：3.svg

 

になるってコト。画像の設定によった3.svgは他の画像がかぶさってきて見えないかもしれませんね。わたしなんかは3.svgが一番上に来るのかと思ってしまいますが逆なんですね。

 

まとめ

background-imageに複数画像を設定する方法を紹介しました。

2枚だけでなく3枚も4枚も、いくつもbackground-imageで背景画像を設定することができます。…そこまですることはまあ少ないと思いますが。

また、個別に位置やサイズ、リピートの有無なども細かく設定できるのも小回り効いていいですよね。

お試しくださいね。