background要素を使って背景画像をカンタンに重ねる方法 │ Triple Threat(トリプルスレッド)

こんばんわ。たいそん(@ttaison)です。
だいぶ間の空いた投稿となってしまいました、、、
もはや文章を書くことを忘れてしまっていたかのごとく投稿が止まっていましたが、大丈夫。生きております。

さて今回の記事ですが、
皆さんホームページやブログのデザイン変更において、
「カンタンに背景画像を重ねて表示したい」とか
「背景を重ねて表示する方法が分からない」と思ったことありませんか？

cssの擬似要素（Before、After）を使って重ねることももちろんできますが、
重ねる画像枚数が増えたりしたら面倒だし、なにより煩わしいですよね。

画像個々にアニメーションかけたりするなら擬似要素使った方がいいと思いますが、固定の背景であればもっとカンタンに重ね背景を設置することができます。

それがこちら！

1. css3から導入されているbackground-imageの複数指定
2. background要素で実際に背景画像を重ねてみる

css3から導入されているbackground-imageの複数指定

MDNのbackground-imageについてのリファレンス

この方法だと、普通の背景画像指定にちょっと毛が生えたくらいの手間で
画像を重ねることができます。

百聞は一見にしかず。やってみましょう。

background要素で実際に背景画像を重ねてみる

まずは好きな画像を２つ用意してください。
ワタシは今回下記の画像を使用します。

このお面をおじさんの顔に重ねてみようと思います。

htmlなどはすでに用意している前提でお話しします。
ひとまずサンプル全体のcssは下記のような感じ。

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	background-color: #000;
	width: 100%;
}
.container{
	width: 100%;
}
img{
	max-width: 100%;
	height: auto;
}
.img_wrap {
	width: 640px;
	height: 427px;
	margin: 0 auto 40px;
    background-image: url('img2.png'),url('img1.jpg');     /* 背景画像指定 */
    background-repeat:  no-repeat;                              /* 背景の繰り返し設定 */
    background-position: left 50% top 48px,center;             /* 背景の位置指定 */
}
@media (max-width: 639px){
	.img_wrap {
	width: 100%;
	height: 427px;
	margin: 0 0 40px;
	background-position: left 50% top 48px,center; 
}
}

上記の.img_wrapの部分。画像が複数指定されているのが分かるかと思います。

background-image: url('img2.png'),url('img1.jpg');/* この部分 */

それぞれのプロパティの中身をカンマで区切ることによって、要素を複数指定することができます。

これだけ。どうです？重なりましたか？

複数指定する際の注意点ですが、
必ず上面に表示したい画像を初めに指定してあげてください。
※サンプルの場合だと、ひょっとこのお面を先に指定。

ちなみに画像だけでなく下記のようにグラデーションと掛け合わせることも
できます。

.bg_wrap {
    background-image: linear-gradient(to top, rgb(13, 0, 21) 0%, rgb(23, 24, 75) 100%),url(img1.jpg);  /* 背景画像指定 */
    background-repeat:  no-repeat;  /* 背景の繰り返し設定 */
    background-position: center;    /* 背景の位置指定 */
}

カンタンですね。