概要

CSSのbackground-sizeプロパティは、要素の背景画像のサイズを調整するためのプロパティです。このプロパティを使うことで、画像の表示サイズを自由に変更し、デザインに合わせて最適な背景画像を設定できます。背景画像が要素にどのようにフィットするかを決めることで、ビジュアルの一貫性や魅力を高めることができます。本記事では、background-sizeプロパティの使い方、指定できる値、そして実際の活用例について詳しく解説します。

background-sizeプロパティの基本

background-sizeプロパティは、要素の背景画像のサイズを指定し、画像がどのように表示されるかをコントロールするために使用されます。このプロパティをうまく活用することで、画像が画面に対して大きすぎたり小さすぎたりするのを防ぎ、レスポンシブで美しいデザインを実現します。

基本構文

selector {
  background-size: 値;
}

例えば、次のように指定すると、div要素の背景画像が要素全体を覆うように設定されます。

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

指定できる値

background-sizeプロパティでは、さまざまな値を使って背景画像のサイズを調整できます。以下は主な指定方法です。

  • auto デフォルトの値で、背景画像は元のサイズで表示されます。画像が自動的に拡大・縮小されることはなく、要素のサイズに合わせる必要がない場合に使います。
.default {
  background-size: auto; /* 元の画像サイズを保持 */
}
  • cover 背景画像が要素全体を覆うように調整されます。要素のサイズに合わせて画像が拡大・縮小されますが、要素を完全にカバーするために画像の一部が切り取られる場合があります。ヒーローイメージなどでよく使われます。
.hero {
  background-size: cover; /* 要素全体を覆うように画像を調整 */
}
  • contain 背景画像が要素内に収まるように表示されます。画像全体が表示されますが、要素のサイズに対して画像が完全にフィットするために、画像の比率が保たれます。要素内に空白ができることがあります。
.thumbnail {
  background-size: contain; /* 要素内に収まるように画像を調整 */
}
  • 明確なサイズ指定（px, %, em など） 背景画像の幅と高さを具体的な数値で指定できます。ピクセル（px）、パーセンテージ（%）、相対単位（em, rem）などで調整可能です。
.custom-size {
  background-size: 100px 200px; /* 幅100px、高さ200pxに設定 */
}
.responsive-size {
  background-size: 50% 50%; /* 要素のサイズに対して50%の大きさに設定 */
}

実用的な使い方

ヒーローセクションでの活用

coverを使用することで、ヒーローセクションの背景画像が要素全体をしっかり覆うように表示され、視覚的にインパクトのあるデザインを作れます。画面サイズが変わっても画像がフィットするため、レスポンシブなレイアウトに適しています。

.hero-section {
  background-image: url('hero-image.jpg');
  background-size: cover;
  background-position: center; /* 中央に配置してバランスを取る */
}

アイコンや装飾画像のサイズ調整

containを使うことで、画像が要素の枠内に収まるように調整できます。これにより、要素の中に小さなアイコンや装飾画像を入れる際に、画像がはみ出さず見やすくなります。

.icon {
  background-image: url('icon.png');
  background-size: contain;
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
}

背景パターンの微調整

背景パターンや繰り返し画像のサイズを微調整したい場合、具体的なサイズを指定することで、パターンの見え方をカスタマイズできます。

.pattern {
  background-image: url('pattern.png');
  background-size: 20px 20px; /* 小さなサイズに設定して細かいパターンを作る */
  background-repeat: repeat;
}

モバイルとデスクトップの異なるサイズ設定

メディアクエリを使用して、デバイスごとに異なる背景画像のサイズを指定することができます。モバイルデバイスでは小さめ、デスクトップでは大きめにするなど、レスポンシブな設定が可能です。

.background {
  background-image: url('background.jpg');
  background-size: cover;
}
@media (max-width: 600px) {
  .background {
    background-size: 100% 200px; /* モバイルでは特定の高さに調整 */
  }
}

注意点

  • 画像のアスペクト比に注意 coverやcontainを使用すると、画像のアスペクト比は保たれますが、一部が切り取られたり、要素に対して余白ができたりすることがあります。テストして適切なサイズを見つけましょう。
  • パフォーマンスの最適化 高解像度の画像を使用するとページの読み込み速度に影響するため、画像の最適化や圧縮を行うことが重要です。
  • レスポンシブ対応 異なるデバイスでの表示を確認し、メディアクエリを活用してデザインが崩れないように調整しましょう。

まとめ

CSSのbackground-sizeプロパティは、背景画像の表示サイズを自由に調整できる強力なプロパティです。coverやcontainを使うことで、レスポンシブで魅力的なレイアウトを作成することができます。また、明確なサイズ指定を行うことで、細かなデザイン調整も可能です。適切に使い分けて、背景画像を効果的に活用し、視覚的に優れたウェブページを作成しましょう。

参照:

background-sizeプロパティ - `CSS` | MDN