模写修行メディア

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

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

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

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

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

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

👇 メンターやってます 👇

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

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

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

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

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターやってます 👆

この記事の目次

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

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

1枚の画像にすると見る環境によって見切れる
.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%;
}
複数の背景画像と背景画像+imgタグ(position配置)の違い

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;を指定
background-positionの計算

鳥の画像の横軸の位置 = ((背景領域の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で背景をグラデーションにする方法を解説!

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

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

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

現役エンジニアによるメンタリングサービス作りました!

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

👇 こんな方のためのサービスです。

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

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

模写修行のトップページのスクリーンショット
模写修行

実務レベルを体験するためのコーディング練習教材