・CSSで背景画像を複数重ねるのってどうやるの？
こんな疑問にお答えします。
実はCSSでは、背景画像を複数重ねて表示させることが可能。
案件では複数の背景画像を使用しないと、デザイン通り反映するのが難しい場面が結構あります。
そんな時に活用できる！
background-imageの指定の仕方を知っていれば、簡単にできますよ。
ということで、この記事では「CSSで背景画像を複数重ねる方法」について解説していきます！
・CSSで背景画像を複数重ねる方法
・CSSで背景画像を複数重ねる順番
・CSSで背景画像を複数重ねた場合の位置調整
目次
【CSS】背景画像を複数重ねる方法【background-image】
CSSにて複数の背景画像を指定するには、「background-image」の指定をいじればよいだけ。
やり方としてはこちらですね↓
.hoge {
background-image: url(1枚目の画像パス),url(2枚目の画像パス);
}このように「,」で区切って指定してあげればOK。
下記の水玉模様と、雷の画像を
合体
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
どうでしょうか？重なってますよね！
コードはこんな感じ↓
<div class="hoge"></div>.hoge {
height: 400px;
background-image:
url(https://jito-site.com/wp-content/uploads/2022/12/coming_soon__1_-removebg-preview.png),
url(https://jito-site.com/wp-content/uploads/2022/12/2-removebg-preview.png);
}もちろん2枚以上も重ねることができますよ！
下記のように、コンマで区切って増やしていくだけ。
.hoge {
background-image: url(1枚目の画像パス),url(2枚目の画像パス),url(3枚目の画像パス),url(4枚目の画像パス);
}先ほどの背景に、下記の2枚を付け加えてみました！
合体
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
4枚の背景が重なってますよね！
.hoge {
height:400px;
background-image:
url(https://jito-site.com/wp-content/uploads/2022/12/coming_soon__1_-removebg-preview.png),
url(https://jito-site.com/wp-content/uploads/2022/12/2-removebg-preview.png),
url(https://jito-site.com/wp-content/uploads/2022/12/4-removebg-preview.png),
url(https://jito-site.com/wp-content/uploads/2022/12/coming_soon__2_-removebg-preview.png);
}background-imageにコンマを区切れば、簡単に複数画像を配置できることがわかりました。
ただ注意点があるのも事実。それは「重なる順番」です。
1番最初に書いたURL（画像パス）が、1番上に表示されます。
今回「雷」⇒「水玉」⇒「雨」⇒「木」の順番に指定しました。つまり「雷」が一番上にきて、「木」が一番下に表示されるということです。
確認すればわかるかと思いますが、その順番に重なっていますよね。
デザインカンプ通り表現したいのなら、順番にも気を付けて実装する必要があります。
ちなみにですが「複数の背景画像」＋「背景色」も組み合わせることができるんですよね。
実際にやってみました↓
オレンジ色の背景色が加わってますよね！
.hoge {
height:400px;
background-image:
url(https://jito-site.com/wp-content/uploads/2022/12/coming_soon__1_-removebg-preview.png),
url(https://jito-site.com/wp-content/uploads/2022/12/2-removebg-preview.png),
url(https://jito-site.com/wp-content/uploads/2022/12/4-removebg-preview.png),
url(https://jito-site.com/wp-content/uploads/2022/12/coming_soon__2_-removebg-preview.png);
background-color: orange;
}先述した背景色を重ねるだけだと、色が一番下に表示されてしまいます。
そのためbackground-color: rgba()の指定でしてあげても、透明レイヤーを重ねるようにはなりません。。
ただそこで裏技があるんですよね。
それがbackground-imageのグラデーションを使ってあげること。
ようはこんな感じ↓
オレンジ色の半透明レイヤーが上に被ってますよね！
.hoge {
height:400px;
background-image:
linear-gradient(rgba(255, 165, 0, .3), rgba(255, 165, 0, .3)),
url(https://jito-site.com/wp-content/uploads/2022/12/coming_soon__1_-removebg-preview.png),
url(https://jito-site.com/wp-content/uploads/2022/12/2-removebg-preview.png),
url(https://jito-site.com/wp-content/uploads/2022/12/4-removebg-preview.png),
url(https://jito-site.com/wp-content/uploads/2022/12/coming_soon__2_-removebg-preview.png);
}やり方としては簡単で「background-image: linear-gradient」を指定してあげるだけ。そしてrgbaの値は同じに。
これなら同じ色から同じ色としてのグラデーションを、背景画像の上に表示することができます！
ちなみに背景色だけ透過させる方法はこちらの記事を参考に↓
【簡単】CSSで背景色のみ透過させる方法【background-color】 【CSS】背景画像を複数重ねた場合【他backgroundプロパティの指定】
あれ、でも他のrepeatとかsizeの調整って複数指定できるの？？
と思う人もいるでしょう。
結論から言うと可能です。画像の場合と同じで、コンマで区切って指定すればOK。
例となるコードはこちら↓
.hoge {
background-image: url(1枚目の画像パス),url(2枚目の画像パス);
background-repeat: 1枚目の画像, 2枚目の画像;
background-size: 1枚目の画像, 2枚目の画像;
background-position: 1枚目の画像, 2枚目の画像;
}こんな感じで、それぞれコンマで区切って指定してあげましょう！
先ほどのこの２枚の画像でやってみます
合体して他プロパティ指定！！
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
どうでしょうか？？「雷」はリピートして作成されていて、「水玉」に関しては位置が右下にずれ、リピートされないようになっていますよね。
コードはこんな感じ↓
.hoge {
height:400px;
background-image:
url(https://jito-site.com/wp-content/uploads/2022/12/coming_soon__1_-removebg-preview.png),
url(https://jito-site.com/wp-content/uploads/2022/12/2-removebg-preview.png);
background-repeat: repeat, no-repeat;
background-size: 200px 200px, contain;
background-position: top left, 200px 100px;
}僕はあまりやりませんが、一括で指定するのも可能ですよ。ようはbackgroundに対して一気に指定してあげるということ。
こんな感じ↓
.hoge {
background:
url(1枚目の画像パス) 画像position / 画像サイズ 画像リピート,
url(2枚目の画像パス) 画像position / 画像サイズ 画像リピート;
}（position、サイズの順に設定して「/」をつけるのを忘れずに）
ちなみにbackgroundで一括指定して、複数画像を表示する場合、背景色は最後に指定してあげましょう。
でないと背景色が表示されません。
こんな感じ↓
.hoge {
background:
url(1枚目の画像パス) 画像position / 画像サイズ 画像リピート,
url(2枚目の画像パス) 画像position / 画像サイズ 画像リピート,
orange;
}【CSS】背景画像を複数重ねる方法【background-image】：まとめ
- 「background-image」を「,」で区切れば複数画像指定できる
- 1番最初に書いたURL（画像パス）が、1番上に表示される
- 背景色も付け加えることが可能
- 他backgroundプロパティの指定も複数可能
背景画像を複数重ねて反映させるようなデザインはよくあるので、覚えておこう！
