はじめに

背景画像background-imageやbackgroundで画像を2枚以上重ねて配置したい時のCSS設定です。

たまに画像の重ね順が分からなくなる時があるので備忘録的にページを作りました。

今回使う画像

写真（左側）は京都の伏見稲荷大社へ行った時に撮影した物です。この写真の上に50％に透過させた黒のpng形式の画像（右側）を配置してみます。

目次

background-imageを使用する場合

background-imageを使用する場合は以下のようになります。

HTML

<div class="test01"></div>

CSS

.sample01 {
　width: 340px;
　height: 340px;
　background-image: url("前に配置したい画像のurl"),
　　　　　　　　　　　 url("後ろに配置したい画像のurl");
}

できあがったもの

CSSにbackground-imageを使うだけで背景画像を2枚重ねる事ができます。

画像のurlをカンマで区切る事で画像を重ねられますが、その時に前（上）に配置したい画像を先に記述します。

背景画像のサイズを個別に調整したい場合はbackground-sizeも同様にカンマで区切ります（その他も同様です）。

例えば、前（上）の半透明の画像だけを縮小して表示したい場合は下記のようになります（background-repeat: no-repeatも記述しないと見た目が分かりにくいので追加しました）。

CSS

.sample02 {
　width: 340px;
　height: 340px;
　background-image: url("前に配置したい画像のurl"),
　　　　　　　　　　　 url("後ろに配置したい画像のurl");
　background-size: 50%,  /*前に配置したい画像のサイズ*/
　　　　　　　　　　　cover;  /*後ろに配置したい画像のサイズ*/
　background-repeat: no-repeat;
}

できあがったもの

この場合だと全体的にCSSの行数が長くなって見た目が分かりにくい（と私は思う）ので、私はbackgroundで記述する方法を使っています。

backgroundを使用する場合

backgroundを使用する場合も先ほどと同じで、前（上）に配置したい画像を先に記述します。

backgroundの場合だと、画像のurlの他、サイズ・表示位置・繰り返し等がショートハンドで一括で記述できるので、CSSの見た目が分かりやすいと私は思っています。

例えば上記のサンプルと同じ配置にする場合はCSSを次のように記述します（背景画像の位置left topとcenter centerは上記では記述していないのですが、ショートハンドでは記述しないと背景が表示されません）。

CSS

.sample03 {
　display: block;
　width: 340px;
　height: 340px;
　background: url("前に配置したい画像のurl") left top / 50% no-repeat ,
　　　　　　　　url("後ろに配置したい画像のurl") center center / cover no-repeat;
}

できあがったもの

補足（グラデーションや単色を重ねる時）

2枚の背景画像（ファイル）を重ねたい場合は、上記の2パターンで良いのですが、「背景画像（ファイル）が1枚で、その上にグラデーションを重ねる場合」は次のように記述できます（単色塗り（background-color）には対応していません）。

CSS

.sample04 {
						display: block;
　width: 340px;
　height: 340px;
　background: linear-gradient(to bottom , rgba(0,0,0,.8) , rgba(0,0,0,.1)) ,
　　　　　　　　url("後ろに配置したい画像のurl") center center / cover no-repeat;
}

できあがったもの

グラデーションの始点と終点を同じ配色にすれば、一応単色も重ねることはできます。

CSS

.sample05 {
　display: block;
　width: 340px;
　height: 340px;
　background: linear-gradient(to bottom , rgba(0,0,0,.5), rgba(0,0,0,.5))  ,
　　　　　　　　url("後ろに配置したい画像のurl") center center / cover no-repeat;
}

できあがったもの

グラデーションを使わずに画像に単色塗を重ねる方法については、改めて紹介したいと思います。