`background-image` プロパティ

box-shadow と同じように、background-image プロパティもカンマ（,)で区切ることで、複数の背景画像を重ねて表示することができます。

Figmaのレイヤーのように、最初に指定した画像が一番上のレイヤー（手前）に来ます。

そして、background-position や background-repeat 、background-size といった他の背景プロパティもカンマで区切って値を指定することでそれぞれのレイヤー画像に対して個別の設定を適用できます。

作成したコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フロントエンド1000本ノック 0037</title>
    <style>
      .layered-bg {
        background-image:
          url('https://path/to/icon.png'),   /* 1番目（上）の画像 */
          url('https://path/to/pattern.jpg'); /* 2番目（下）の画像 */

        background-repeat:
          no-repeat,                        /* 1番目の画像の設定 */
          repeat;                           /* 2番目の画像の設定 */

        background-position:
          right bottom,                     /* 1番目の画像の位置（右下） */
          top left;                         /* 2番目の画像の位置（左上） */
      }
    </style>
</head>
<body>
    <main>
      <h1>background-image プロパティ</h1>

      <div style="width: 500px; height: 300px;" class="layered-bg"></div>

    </main>
    <footer>
      <p>Copyright 2025</p>
      <p>フロントエンド1000本ノック</p>
    </footer>

</body>
</html>