【CSS】backgroundで背景画像を複数使うテクニック

こんにちは！社員Aです👩

久しぶりの投稿になってしまいましたが、また続けてお届けできるようにがんばります！

さて、今回はCSSのbackgroundプロパティで複数の背景画像を使う方法についてご紹介します。

一つの要素に複数個の背景画像をつけたい

コーディングしていると意外と遭遇するのですが、一つの要素に複数個の背景画像を入れたいときがあります。

例えば左右に別々の背景画像をつけたり、重ねたり…など。

そんなときにわざわざ囲む要素を増やさなくても、backgroundプロパティで対応できます。

HTML

<div class="test">要素</div>

CSS

.test{
	background-image:url(1.jpg),url(2.jpg);
	background-repeat:no-repeat,no-repeat;
	background-position:center top,center bottom;
}

このように、background-image:でカンマ区切りで複数個画像を指定すると、指定した分だけ背景を設定できます。

このとき注意したいのが、backround-imageで複数個設定した場合は、background-repeatやbackground-positionなども同じ個数分設定が必要です。

背景画像を複数個と、背景色もつけたい場合

たまに、背景画像を複数個設置した上で背景色も同時につけたいという場合もあります。

この場合は、background-imageで複数個の背景を指定しながら、さらにbackground-colorで色を指定するだけで対応できます。

.test{
	background-image:url(1.jpg),url(2.jpg);
	background-repeat:no-repeat,no-repeat;
	background-position:center top,center bottom;
	background-color:#000000;
}