背景省略形プロパティ
最終更新：2026-09-13
background 背景省略形プロパティ
background は背景プロパティのショートハンドで、背景色・画像・位置・サイズ・繰り返しなどを 1 つの宣言で設定できます。このショートハンドはコードを簡潔に保ち、省略したサブプロパティは既定値にリセットされます。これは CSS で最も広く使われるショートハンドの一つです。
| カテゴリ | |
|---|---|
| 初期値 | transparent none repeat scroll 0% 0% auto padding-box border-box |
| 継承 | いいえ |
| 適用対象 | all |
| アニメーションタイプ | shadow |
| CSS バージョン | CSS1 |
| 状態 | 標準 |
📝 構文
background: [<bg-color> || <bg-image> || <bg-repeat> || <bg-position> [ / <bg-size> ]? || <bg-attachment> || <bg-clip> || <bg-origin>];⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
<bg-layer>*, <final-bg-layer> | 値 | 背景のショートハンド |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： ショートハンドでは、background-size は background-position の後に続き、スラッシュで区切る必要があります。例: center/cover。
注意： このショートハンドは指定されていないすべての背景サブプロパティを初期値にリセットするため、以前の個別設定を上書きする可能性があります。
❓ よくある質問
Q背景のショートハンドとサブプロパティの個別設定、どちらを使うべきですか？
Aショートハンドは完全な背景を一度に定義するのに最適です。例: background: #fff url(bg.jpg) no-repeat center/cover; は簡潔です。個別プロパティは、他をリセットせずに 1 つのサブプロパティ（background-size など）だけを変更したい場合に安全です。ショートハンドは省略したサブプロパティを既定値にリセットするため、「先にショートハンド、その後に個別」は予期せぬ結果を招きやすい点に注意してください。
Q背景ショートハンドの値の順序は重要ですか？
Aブラウザが値の型で判別するため順序はかなり柔軟ですが、2 つのルールは必須です。background-size は position の直後に続きスラッシュで区切る（例: center/cover）、background-color は最後に置くことです。推奨される順序は、color、次に image、次に repeat、次に position/size です。
Qショートハンドで背景画像を要素全体に敷き詰めるにはどうすればよいですか？
A1 行で済みます。background: #333 url(photo.jpg) no-repeat center/cover;。これは背景色・画像・no-repeat・水平垂直の中央揃え・アスペクト比を保ちながらコンテナを埋める cover サイズを設定するのと同等です。これはバナーやカードの背景の標準的な書き方で、簡潔で間違いにくいです。
Q背景ショートハンドはどのサブプロパティをリセットしますか？
A明示的に書かなかったものはすべて初期値にリセットされます。image は none、repeat は repeat、position は 0% 0%、size は auto、attachment は scroll、clip は border-box、origin は padding-box です。そのため、背景サブプロパティで「ショートハンドの後に個別」という組み合わせは避けてください。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
