レスポンシブデザインにも対応！背景画像を伸縮させる

2024-04-07

HTML要素全体に背景画像を伸縮させる方法

<html>
<head>
<title>背景画像を伸縮させる</title>
<style>
body {
  background-image: url("https://example.com/image.jpg");
  background-size: cover;
}
</style>
</head>
<body>
<h1>これは見出しです</h1>
<p>これは段落です</p>
</body>
</html>

CSS

body {
  background-image: url("https://example.com/image.jpg");
  background-size: cover;
}

解説

background-image プロパティで背景画像のURLを指定します。

background-size: cover; は、背景画像を要素のサイズに合わせて伸縮させ、常に要素全体を覆うように表示します。

body {
  background-image: url("https://example.com/image.jpg");
  background-size: 100% 100%;
}

body {
  background-image: url("https://example.com/image.jpg");
  background-size: cover;
  background-position: center center;
}

ポイント

レスポンシブデザインの場合は、メディアクエリを使ってデバイスごとに背景画像のサイズを調整する必要があります。

改善点

説明をより簡潔にする。
コード例をより分かりやすくする。
画像の著作権について言及する。

上記は基本的な方法です。より高度な方法については、参考資料を参照してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景画像を伸縮させる</title>
  <style>
    body {
      background-image: url("https://example.com/image.jpg");
      background-size: cover;
    }
  </style>
</head>
<body>
  <h1>これは見出しです</h1>
  <p>これは段落です</p>
</body>
</html>

上記のコードは、HTML要素全体に背景画像を伸縮させる例です。

実行結果

上記のコードを実行すると、ブラウザ全体に背景画像が表示されます。
画像は、ブラウザのウィンドウサイズに合わせて伸縮されます。

背景画像を伸縮させる他の方法

background-size プロパティに 100% 100% を指定する

body {
  background-image: url("https://example.com/image.jpg");
  background-size: 100% 100%;
}

この方法は、background-size: cover; と同様の効果がありますが、古いブラウザでも動作します。

background-repeat プロパティを使用する

body {
  background-image: url("https://example.com/image.jpg");
  background-repeat: repeat;
}

この方法は、背景画像を要素全体に繰り返し表示します。

background-position プロパティを使用する

body {
  background-image: url("https://example.com/image.jpg");
  background-size: cover;
  background-position: center center;
}

この方法は、background-size: cover; と組み合わせて、画像の位置を調整することができます。

CSS Grid レイアウトを使用する

body {
  display: grid;
  background-image: url("https://example.com/image.jpg");
  background-size: cover;
}

この方法は、CSS Grid レイアウトを使用して、背景画像を要素全体に伸縮させます。

JavaScriptを使用する

const body = document.querySelector("body");
const image = new Image();

image.onload = function() {
  body.style.backgroundImage = `url(${image.src})`;
  body.style.backgroundSize = "cover";
};

image.src = "https://example.com/image.jpg";