模写修行メディア

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

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

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

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

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

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

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

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

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

【方法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で背景をグラデーションにする方法を解説!

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

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

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

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

模写修行を見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

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

駆け出しエンジニアのためのコーディング練習教材