backgroundの画像背景を
複数指定する設定方法やコードと注意点など

2023.07.11
2019.08.20

HTML・CSS系

デザインとコーディングを1人で行っていれば、ある程度コーディングする事を考えた上でデザインができるのですが、デザインとコーディングが分業化されている場合、あれ？これどうやってコーディングしようか…と悩むシーンが出てきます。

そういった悩むシーンの最たる例の1つとも言えるかもしれないのが、背景が複数デザインの中に組み込まれているようなシーンかもしれません。

実際にコーディングだけを受ける場合、特にメインビジュアルのデザインなどのように少し凝った作りになる箇所などは、背景を複数使わないと元のデザイン案を反映するの難しそうだなーというケースがありますので覚えておくと良いと思います。

この記事の目次

やり方は簡単。カンマで複数設定するだけ

とはいえ、実際にやろうと思った時、やり方は簡単です。
CSSのbackground-imageで指定するURLをカンマで複数指定すれば良いだけです。

.background{
  background-image: url("1枚目の画像URL"), url("2枚目の画像URL");
}

ただこれだけで複数の背景画像を指定する事が可能になります。

デモページ

複数指定は3個以上でも可能

あまりそこまで使う機会はないのではないかとも思いますが、ワンポイントのアクセントなどを右上と左下に表示などのようなデザインの時、通常の背景、右上のワンポイント背景、左下のワンポイント背景といったような、2個だけでない3個以上使いたいというデザインの場合もあるかもしれません。

2個だけでなく3個以上でも設定は可能で、使い方は同じく「,」（カンマ）で設定していくだけで3個以上の設定も可能です。

.background{
  background-image: url("1枚目の画像URL"), url("2枚目の画像URL"), url("3枚目の画像URL"）, url("4枚目の画像URL"）;
}

増やしたいときは増やしたいだけ、カンマで区切っていくことで増やせます。

デモページ

その他の設定も同じく合わせて使って設定できる

上記のタグは背景画像の設定だけになっていますが、実際の現場では背景画像を指定するなら、その他のbackgroundに関する項目などの、repeat、size、positionなども同時に設定することが一般的です。

.background{
  background-image: url("1枚目の画像URL"), url("2枚目の画像URL");
  background-position: 1枚目の画像の位置設定, 2枚目の画像の位置設定;
  background-size: 1枚目の画像のサイズ設定, 2枚目の画像のサイズ設定;
  background-repeat: 1枚目の画像のリピート設定, 2枚目の画像のリピート設定;
}

実際は一括でショートハンドで設定するのが楽

このあたりは人に寄るかとは思いますが、marginやbackgroundなど1つ1つを個別に書いていくとコードが長くなりすぎるため、ショートハンドと呼ばれる一括で設定する書き方でやる方が楽に管理もできます。

慣れないとミスが起こったりしやすくなるので、好みにはなるかとは思いますので、1つ1つ個別に書いた方がわかりやすいという方もいるかと思いますが、コードが短くなるのでこちらの方が個人的には好きです。

.background{
  background:
  url("1枚目の画像URL") 位置設定 / サイズ設定 リピート設定,
  url("2枚目の画像URL") 位置設定 / サイズ設定 リピート設定;
}

複数指定する以外の書き方は、通常のbackgroundの書き方となんら変わる事はありません。ただただ設定を「,（カンマ）」で区切って追加していくだけになります。

デモページ

複数指定するときのちょっとした注意点

画像を複数指定するのはカンマ区切りで追加していくだけになりますが、ちょっとした注意点や気をつけておくべき点もありますので、まとめておきます。

背景の重なり順は、記載順に上から表示される

背景を複数記載すると、いわゆるレイヤー的に上下の関係性が出来てしまいます。この時、背景の順序的には、記載したものが一番上に表示され、2個目以降に記載した画像は、1個前の画像の後ろ側に表示される事になります。

.background{
  background:
  url("/assets/img/background01.jpg") 100px top no-repeat, // 1番目に表示
  url("/assets/img/background02.jpg") 150px top no-repeat, // 2番目に表示
  url("/assets/img/background03.jpg") 200px top no-repeat, // 3番目に表示
}

複数の画像を背景に指定する場合、記載の順序を間違えると思ってた通りに表示されないということになりかねないので、この重なりの順序についてはしっかりと把握しておくようにしましょう。

デモページ

背景色は複数不可、背景画像が複数あって背景食も指定する場合は最後に記載する

背景画像が複数指定できるなら、色は？と思うかもしれませんが、背景色は複数指定は残念ながら効かず1色しか指定する事はできないようです。

また、背景画像が1個だけだと気にしなくても良いのですが、背景画像を複数複数指定する場合で、背景色も指定する場合は、最後に指定したものだけが反映されるようになりますので、色指定も組み合わせる場合は最後に記載するようにしましょう。

.background{
  background:
  url("/assets/img/background01.jpg") top left 200px 200px repeat-x,
  url("/assets/img/background02.jpg") center/contain no-repeat,
  #999;
}

といったように、背景色も指定する場合は、必ず最後に指定する必要があります。また、最初に設定などしてしまうとエラーで、一切表示されなくなってしまうので注意しましょう。

デモページ

透過背景を使う時はグラデーション指定で指定可能

背景色を指定する場合、最後に記載しなければ背景色が反映されませんが、最後に記載するということは、レイヤー的には一番下に位置することになり、背景色が一番下に表示されることになります。

それで問題ないということであれば良いのですが、場合によっては透過背景色を使って、画像に半透明のカラーを被せて使いたいというシーンもあるかもしれません。ですが、背景画像を複数指定している場合背景色は一番最後に指定しなければならず、background-color: rgba()を使って記載しても反映されない仕様になっています。

そのため、このような時はlinerar-gradientを使って、背景色にグラデーション指定して画像のURLを記載するより先に書くことで、背景色を一番上のレイヤーとして表示することができます。

.background{
  background:
  linear-gradient( rgba(150, 150, 150, 0.5), rgba(150, 150, 150, 0.5)),
  url("/assets/img/sample01.png") 150px top no-repeat,
  url("/assets/img/sample02.png") 350px top no-repeat,
  url("/assets/img/sample03.png") 50px top / 300px no-repeat;
}

こう書く事で、画像の上に背景色のレイヤーが重なることで、画像に半透明なマスクをかけたりするような使い方も可能になります。

デモページ