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

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

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

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

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

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

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

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

.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より前面に配置されます。

【方法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設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか？

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！

嬉しい声もいただいています！

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇

---

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet

---

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

---

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

---

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！