How to make a background for a kaboom.js website

I made a kaboom.js application and want to set a background for it. How do I do that? I googled a lot and tried some methods myself, and it still doesn't work.

(Also StackOverflow says my post is mostly code so I added this text)

My code

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Kaboom!!!</title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <style>
        * {
            margin: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: green;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
  {{kaboom}}
</body>
</html>

main.js:


import kaboom from "kaboom"

kaboom()
loadSprite("bean", "sprites/bean.png");

scene("game", () => {
  let score = 0;
  const scoreLabel = add([
      text(score),
      pos(24, 24)
  ])
  action(() => {
      score++;
      scoreLabel.text = score;
  });
  // add a game object to screen
  const bean = add([
    // list of components
    sprite("bean"),
    pos(80, 40),
    area(),
      body()
  ])

  // add the platform
  const platform = add([
    rect(width(), 48),
    pos(0, height() - 48),
    outline(4),
    area(),
    solid(),
    color(127, 200, 255),
  ])

  // add tree
  const tree = add([
      rect(48, 64),
      area(),
    outline(4),
    pos(width(), height() - 48),
    origin("botleft"),
    color(255, 180, 255),
    move(LEFT, 240),
    "tree"
  ])

  // events
  // jump when mouse is clicked
  mouseClick(() => {
    if (bean.grounded()) {
      bean.jump()
    }
  })
  // explode when bean touches tree
  bean.collides("tree", () => {
      addKaboom(bean.pos)
      shake()
      go("lose")
  })

  // loops
  loop(1, () => {
      // add tree
      add([
          rect(48, 64),
          area(),
          outline(4),
          pos(width(), height() - 48),
          origin("botleft"),
          color(255, 180, 255),
          move(LEFT, 240),
          "tree", // add a tag here
      ]);
  });
});

scene("lose", () => {
    add([
        text("Game Over"),
        pos(center()),
        origin("center"),
    ])
    mouseClick(() => {
      go("game")
    })
})

go("game")

I have tried:

Using CSS (background: green;)
- And the background showed up for one second when the game was loading, and then it disappears

Solution

After the new update, clearColor no longer works. Use background instead:

kaboom({
  background: [51, 151, 255] // The RGB code
})