複数の背景画像の利用

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

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

css
.myclass {
  background:
    background1,
    background2,
    /* …, */ backgroundN;
}

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

例

この例では、3 つの背景が重なっています。Firefox のロゴ、泡の画像、そして線形グラデーションです。

HTML

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

CSS

css
.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(bubbles.png),
    linear-gradient(to right, rgb(30 75 115 / 100%), rgb(255 255 255 / 0%));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
}

結果

（CodePen で画像が表示されない場合、CSS セクションの 'Tidy' をクリックしてください）

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

関連情報