Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
エフェクト Widely available

background-size

背景画像の表示サイズを制御する重要なプロパティです。cover は要素を完全に覆うようにリサイズし、contain は画像全体が見えるようにリサイズします。レスポンシブデザインにおいて、異なる画面サイズでも背景画像を適切に表示するために不可欠です。

背景サイズ制御

概要

背景画像の表示サイズを制御する重要なプロパティです。cover は要素を完全に覆うようにリサイズし、contain は画像全体が見えるようにリサイズします。レスポンシブデザインにおいて、異なる画面サイズでも背景画像を適切に表示するために不可欠です。

対応ブラウザ

デスクトップ

Chrome 21+
Edge 12+
Safari 5.1+
Firefox 9+

モバイル

Chrome Android 25+
Safari iOS 4.2+
Firefox Android 18+

基本構文

CSS 
.hero {
  background-image: url('hero.jpg');
  background-size: cover;
}
.icon-bg {
  background-size: 32px 32px;
}

実務での使いどころ

  • レスポンシブな全画面背景画像

    background-size: cover を使って、どの画面サイズでも要素全体を覆う背景画像を実現できます。

注意点

  • cover を使用すると画像の端が切り取られる可能性があります。重要な部分が見えなくならないよう、background-position と組み合わせて調整してください。

アクセシビリティ

  • 大きな背景画像はページの読み込みパフォーマンスに影響します。適切な画像サイズと圧縮を行い、低帯域幅環境のユーザーにも配慮してください。

参考リンク