background-size、background-position、object-fit プロパティを使いこなす

HTML、CSS、background-image を使って div に背景画像をぴったり合わせる方法

Web ページで div 要素に背景画像をぴったり合わせる方法はいくつかあります。この解説では、最も一般的な 3 つの方法を紹介します。

background-size プロパティは、背景画像のサイズを指定するために使用されます。このプロパティを使うには、以下の値を指定できます。

• auto: 画像の元のサイズを維持します。
• contain: 画像を div 要素内に収まるようにサイズ変更します。

例

.div {
  background-image: url(image.jpg);
  background-size: cover;
}

• left: 画像を div 要素の左側に配置します。

.div {
  background-image: url(image.jpg);
  background-position: center;
}

object-fit プロパティは、img 要素と svg 要素の画像のサイズと位置を調整するために使用されます。このプロパティを使うには、以下の値を指定できます。

• fill: 画像を要素全体に引き伸ばして表示します。

.div {
  background-image: url(image.jpg);
  object-fit: cover;
}

• 画像を div 要素全体にぴったり合わせたい場合は、background-size: cover; を使用します。
• 画像を要素内に収まるようにサイズ変更したい場合は、object-fit: contain; を使用します。

HTML

<div class="div"></div>

CSS

.div {
  width: 200px;
  height: 200px;
  background-image: url(image.jpg);
}

/* background-size を使って画像を div 要素全体にぴったり合わせる */
.div-1 {
  background-size: cover;
}

/* background-position を使って画像を div 要素の中央に配置する */
.div-2 {
  background-position: center;
}

/* object-fit を使って画像を要素内に収まるようにサイズ変更する */
.div-3 {
  object-fit: contain;
}

実行結果

• .div-1: 画像が div 要素全体にぴったりと表示されます。

補足

• 上記のコードはあくまでもサンプルです。必要に応じて変更してください。
• 画像のサイズや div 要素のサイズを変更すると、表示結果が変わります。

• repeat: 画像を水平方向と垂直方向に繰り返します。
• no-repeat: 画像を繰り返しません。

.div {
  background-image: url(image.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

• scroll: 画像はスクロールと一緒に移動します。
• fixed: 画像はスクロールしても移動しません。

.div {
  background-image: url(image.jpg);
  background-size: cover;
  background-attachment: fixed;
}

media query を使って、画面サイズやデバイスによって背景画像の表示方法を変えることができます。

@media (max-width: 768px) {
  .div {
    background-image: url(image-small.jpg);
  }
}

@media (min-width: 769px) {
  .div {
    background-image: url(image-large.jpg);
  }
}

• 画像を繰り返したくない場合は、background-repeat: no-repeat; を使用します。
• 画像をスクロールしても移動したくない場合は、background-attachment: fixed; を使用します。
• 画面サイズやデバイスによって背景画像の表示方法を変えたい場合は、media query を使用します。