過去バージョン

background-image プロパティとは

background-image は CSS で要素の背景画像を指定するプロパティです。画像ファイル（PNG / JPG / WebP / SVG / GIF）を URL で読み込んだり、CSS グラデーション関数（linear-gradient / radial-gradient）を直接書いて画像ファイルなしで背景を作ったりできます。

基本構文

.hero {
  background-image: url("/img/hero.jpg");
}

.cta {
  /* グラデーション */
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.no-bg {
  background-image: none;   /* 背景画像を無効化 */
}

主な値

複数の背景画像を重ねる

カンマ区切りで複数の背景を指定でき、先に書いたものが上に重なります。半透明 PNG やグラデーションを重ねてオーバーレイ表現に多用されます。

.banner {
  background-image:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),  /* 上：黒の半透明 */
    url("/img/hero.jpg");                                /* 下：実画像 */
  background-size: cover;
  background-position: center;
  color: #fff;
}

関連プロパティと組み合わせる

典型レイアウト：cover でフィット

.hero {
  background-image: url("/img/hero.jpg");
  background-size: cover;        /* 要素全体を覆う */
  background-position: center;   /* 中央に寄せる */
  background-repeat: no-repeat;
  height: 480px;
}

注意点

• 背景画像は alt が付けられない → 意味のある画像は <img> を使う（アクセシビリティ）
• HTTPS ページから http:// の画像 URL を読むと混在コンテンツでブロックされる
• url() 内のパスはCSS ファイル基準の相対パスになる
• 大きすぎる画像は LCP（Largest Contentful Paint）悪化の原因。WebP / AVIF や 適切な圧縮を推奨
• background-color も併記しておくと、画像読み込み失敗時に真っ白にならない

SVG・グラデーションを混ぜたデザイン例

SVG をデータ URI として読み込み、その上に半透明グラデーションを重ねるとリッチな見出しが作れます。SVG はベクタなので拡縮しても劣化しません。CSS ファイル内で直接書けるため画像アセットの管理コストも下がり、テーマカラーをサイトごとに差し替える運用にも向きます。

パフォーマンス上の注意

背景画像はページ読み込み時に追加の HTTP リクエストを発生させ、特にヒーロー画像のような大きな画像は LCP（Largest Contentful Paint）の主要因になります。重要な背景画像には <link rel="preload" as="image"> でプリロードを指定し、画像形式は WebP や AVIF を優先するとファイルサイズを半分以下に抑えられます。装飾用の小さな模様は data URI で CSS に埋め込み、複数のサイズが必要なら後述の image-set() や <picture> 相当の機能で対応します。CSS 内で url() を多数記述するとブラウザは全件パースしますが、ダウンロードは実際にスタイルが適用されたときに発生するため、メディアクエリで分岐させた背景画像は不要な転送が走りません。

data URI で画像をインライン化

小さなアイコンは Base64 で url() 内に埋め込めばリクエスト数を減らせます。ただしキャッシュが効かないためサイズの大きい画像には不向き。

.bullet {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><circle cx='4' cy='4' r='3' fill='%233498db'/></svg>");
}

レスポンシブ：image-set() で高 DPI 対応

Retina 等の高 DPI ディスプレイ向けに、image-set() で密度別の画像を切り替えられます。

.hero {
  background-image: image-set(
    url("/img/hero.jpg")    1x,
    url("/img/hero@2x.jpg") 2x,
    url("/img/hero@3x.jpg") 3x
  );
}

関連

• backgroundプロパティ — 背景関連のショートハンド
• background-color プロパティ — 背景色
• background-size プロパティ — 背景画像サイズ
• background-position プロパティ — 背景画像位置
• linear-gradient 関数 — グラデーション値