background-imageで複数の背景画像を設定する方法を解説！

使い所はあまり多くありませんが、background-imageプロパティでは、複数の画像を設定することが出来ます。

• 背景画像として複数の画像を設定する方法
• 便利な使い方(Tips)

この記事では、これらを紹介します。

background系のプロパティをまだ勉強していない方は、まず下記の記事を読んでからの方が良いかもしれません。

backgroundで背景色や背景画像を設定する方法！

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

👆 メンターやってます 👆

背景画像として複数の画像を設定"しない"場合のデメリット

背景画像として複数の画像を設定する便利さがわかるように、まずは複数の画像に"しない"場合のデメリットを紹介します。

.background {
    ...
    background-image: url(../img/bg02.jpg);
    background-position: center;
    background-size: cover;
}

上の画像は『木の画像』と『鳥の画像』をセットで1枚の画像としています。この場合、見る環境によって『鳥の画像』が見切れて、おかしな見た目になります。

background-position: bottom right;にすれば見切れませんが、それはそれで違和感が出るケースも多いです。

また、鳥の画像だけサイズ調整することもできません。

DEMOを用意したので、幅や高さを変更して確認してみてください。スマホで見るともはや『鳥の画像』は見えなくなっているかもしれません。

以上の理由から、仮に今回のようなデザインであれば、下のどちらかの方法をとった方が良いです。

• 【方法1】複数の背景画像を設定する方法
• 【方法2】imgタグとpositionを使う方法

これ以降、上の2つの書き方を紹介します。

【方法1】複数の背景画像を設定する方法

『木の画像』と『鳥の画像』を別々にして、2枚の画像を背景画像とします。こちらの方法がこの記事のメインです。

.background {
    ...
    background-image: url(../img/bird.svg), url(../img/bg.jpg);
    background-position: bottom right, center;
    background-size: 200px, cover;
    background-repeat: no-repeat, no-repeat;
}

このようにbackground-〇〇系のプロパティは、background-color以外は全てカンマ区切りで複数設定できます。

重なり順は、前に書いたものほど前面に配置されます。上の例では、bird.svgがbg.jpgより前面に配置されます。

【駆け出しの方へ】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

【方法2】imgタグとpositionを使う方法

『木の画像』だけ背景画像で、『鳥の画像』はimgタグで入れてposition配置します。

.background {
    ...
    background-image: url(../img/bg.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}

.bird {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 200px;
}

上のコードで、【方法1】と全く同じ見た目にできます。positionを勉強していれば、なんて事のないコードですね。

【方法1】と【方法2】の違い

• background-positionの値
• position配置する際のtop / bottom / left / rightの値

上の2点は配置の基準が異なるので注意が必要です。中央に配置する場合を例に紹介します。

👇 【方法1】複数の背景画像を設定する方法

/* 🙆‍♂️ 中央に配置される */

.background {
    ...
    background-image: url(../img/bird.svg), url(../img/bg.jpg);
    background-position: 50% 50%, center;
}

👇 【方法2】imgタグとpositionを使う方法

/* 🙅‍♂️ 中央に配置されない */

.background {
    ...
    background-image: url(../img/bg.jpg);
    background-position: center;
}

.bird {
    ...
    top: 50%;
    left: 50%;
}

positionで配置する方法は赤い点が親要素に対して50%の位置に配置されます。

background-positionの場合は、親要素に対して何%の位置に配置するかを指定しているわけではありません。

例えば...

.background {
    ...
    width: 1000px;
    height: 500px;
    background-image: url(../img/bird.svg), url(../img/bg.jpg);
    background-position: 50% 50%, center; /* 👈 本当はcenter, center;で良い */
    background-size: 200px, cover;
}

※ 説明のために『鳥の画像』の位置を50% 50%としていますが、本来centerとすれば良いです。

• 背景領域のwidthが1000px / heightが500px
• 『鳥の画像』のサイズが横200px / 縦200px
• background-position: 50% 50%, center;を指定

鳥の画像の横軸の位置 = ((背景領域のwidth) - (鳥の画像の横のサイズ)) × n%
= (1000px - 200px) × 50%
= 400px

縦軸の位置の計算も同じです。positionのように1000pxの50%で500pxの位置に配置されるわけではありません。

【応用】画像の上に半透明のレイヤーを載せる方法

.background {
    ...
    background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), url(../img/bg.jpg);
}

• background-imageはグラデーション背景にできる
• background-imageで複数の背景画像の設定できる

これらを利用しています。

グラデーションを使っても、同じ色から同じ色へのグラデーションであれば、1つの色になることを利用しています。

CSSで背景をグラデーションにする方法を解説！

グラデーションに関しては、上の記事で詳しく紹介しています。

擬似要素を使ったテクニックがよく紹介されていますが、今回の方法の方がスッキリ書けます。また、他の用途で擬似要素が使いたくなる場合も困りません。

独学に限界を感じていませんか？