HTMLの背景画像をフルスクリーンで表示させる方法

HTML CSS

HTMLの背景画像をフルスクリーンで表示させる方法

以下は背景画像をフルスクリーンで表示させたサンプルです。

HTMLファイル (index.html)

<body>
  <div class="test-background"></div>
</body>

CSSファイル (styles.css)

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.test-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw; /* ビューポートの幅全体 */
  height: 100vh; /* ビューポートの高さ全体 */
  background-image: url('path/to/your/image.jpg'); /* 背景画像のURLを指定 */
  background-size: cover; /* 画像をフルスクリーンで表示 */
  background-position: center; /* 画像の位置を中央に */
}

この例では、.test-background クラスを持つ div 要素を使って背景画像をフルスクリーンで表示しています。

最近ではあまり見ないデザインですが、写真等をバック全体で使いたい場合に有効な実装ですね。