JavaScriptで背景画像(backgroundImage)を追加する方法

2024-02-08 08:10 JavaScript 背景画像 CSS 
body {
  background-image: url('path/to/image.jpg');
}

上記の例では、body要素の背景にimage.jpgという画像ファイルを使用しています。url()の引数には、画像ファイルのパスを指定します。

  1. JavaScriptを使用した方法: JavaScriptを使って背景画像を動的に変更することもできます。以下のコード例では、ボタンをクリックした際に背景画像が変更されます。
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url('default-image.jpg');
    }
  </style>
</head>
<body>
  <button onclick="changeBackground()">背景画像を変更する</button>
  <script>
    function changeBackground() {
      var body = document.querySelector('body');
      body.style.backgroundImage = "url('new-image.jpg')";
    }
  </script>
</body>
</html>

上記の例では、最初にdefault-image.jpgがデフォルトの背景画像として設定され、ボタンをクリックするとnew-image.jpgに変更されます。JavaScriptのquerySelector()メソッドを使用して、body要素を取得し、style.backgroundImageプロパティを変更しています。

以上がJavaScriptを使用して背景画像を追加する方法です。必要に応じて、これらのコード例をカスタマイズして使用してください。