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

background

背景に関する8つの個別プロパティ（color、image、position、size、repeat、origin、clip、attachment）を1行で記述できるショートハンドです。複数の背景レイヤーをカンマ区切りで指定することも可能で、画像やグラデーションを重ねた表現ができます。CSSの最も基本的かつ頻繁に使用されるプロパティの一つです。

背景ショートハンド

概要

背景に関する8つの個別プロパティ（color、image、position、size、repeat、origin、clip、attachment）を1行で記述できるショートハンドです。複数の背景レイヤーをカンマ区切りで指定することも可能で、画像やグラデーションを重ねた表現ができます。CSSの最も基本的かつ頻繁に使用されるプロパティの一つです。

対応ブラウザ

デスクトップ

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

モバイル

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

基本構文

CSS 
.hero {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url('hero.jpg') center/cover no-repeat;
}

実務での使いどころ

  • ヒーローセクションの背景設定

    画像の上にグラデーションオーバーレイを重ねて、テキストの可読性を確保しながら背景画像を表示できます。

注意点

  • ショートハンドで指定しなかったサブプロパティは初期値にリセットされます。既存の個別プロパティを上書きしないよう、記述順序に注意してください。

アクセシビリティ

  • 背景画像上にテキストを配置する場合は、画像が読み込まれなかった場合でもテキストが読めるよう、適切な背景色をフォールバックとして設定してください。

参考リンク