ジャンプ先:

複数の背景画像を要素に適用できます。これらは、最初に記述した背景が一番上になり、後に記述した背景がその下になるように重ね合わされます。最後の背景にだけ、背景色を指定できます。

複数の背景の指定は、下記のように簡単です。

.myclass {
  background: background1, background 2, ..., backgroundN;
}

background-color を除いて、短縮プロパティの background と個々のプロパティの両方で指定できます。つまり、下記のプロパティは背景ひとつずつに対して指定できます。
background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

この例では、3 つの背景が重なっています。Firefox のロゴ、泡の画像、そして linear-gradient です。

HTML

<div class="multi-bg-example"></div>

CSS

.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat,
      no-repeat,
      no-repeat;
  background-position: bottom right,
      left,
      right;
}

結果

(CodePen で画像が表示されない場合、CSS 部分の「Tidy CSS」をクリックしてください)

ご覧のように、Firefox のロゴ (background-image で最初に記載) が一番上になり、泡の画像がそれに続き、グラデーション (最後に記述) が前述の全ての画像の下に配置されています。後に続くプロパティ (background-repeatbackground-position) はそれぞれの背景に対応して適用されています。つまり、background-repeat の最初の値は最初(最前面)の画像に適用され、後に続くものも順番に適用されます。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: sutara79
最終更新者: sutara79,