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

background-image

要素の背景に画像やCSSグラデーションを表示できます。カンマ区切りで複数の背景を重ねることが可能で、レイヤーの順序は最初に記述したものが最前面になります。グラデーションと画像の組み合わせにより、オーバーレイ効果やパターン背景など多彩な表現を実現できます。

背景画像

概要

要素の背景に画像やCSSグラデーションを表示できます。カンマ区切りで複数の背景を重ねることが可能で、レイヤーの順序は最初に記述したものが最前面になります。グラデーションと画像の組み合わせにより、オーバーレイ効果やパターン背景など多彩な表現を実現できます。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1.3+
Firefox 3.6+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

CSS 
.hero {
  background-image:
    linear-gradient(to bottom, transparent, #000),
    url('hero-bg.jpg');
}

実務での使いどころ

  • 複数背景レイヤーの活用

    グラデーションオーバーレイと写真を組み合わせて、テキストの可読性を確保しながら写真を表示するヒーローセクションを作成できます。

注意点

  • 背景画像は装飾目的のみに使用してください。意味のある画像はHTMLの img 要素を使い、alt 属性で説明を提供してください。

アクセシビリティ

  • background-image で表示した画像にはalt属性を設定できません。情報を伝える画像にはimg要素を使用し、適切な代替テキストを提供してください。

参考リンク