この記事の要点

background は背景関連の8 つのプロパティをまとめて指定できるショートハンド background-color / image / position / size / repeat / origin / clip / attachment を 1 行で書ける 省略した個別プロパティは初期値にリセットされる（重要） background-size は background-position の後ろに / 区切りで書く（例：center/cover） カンマ区切りで複数背景を指定可能。background-color は最後のレイヤにだけ書く

background プロパティとは

background は、要素の背景に関する複数の CSS プロパティを1 行で同時に指定できるショートハンドプロパティです。背景色・背景画像・位置・サイズ・繰り返し・原点・クリップ・固定スクロールを一気に書けるため、コードが簡潔になります。

基本構文

/* color / image / position / size / repeat / attachment */
.hero {
  background: #222 url("/img/hero.jpg") center/cover no-repeat fixed;
}

包含する個別プロパティ

個別プロパティ	初期値	意味
background-color	transparent	背景色
background-image	none	背景画像 / グラデーション
background-position	0% 0%	背景の表示位置
background-size	auto	背景のサイズ
background-repeat	repeat	繰り返し方向
background-origin	padding-box	背景の原点ボックス
background-clip	border-box	背景の表示範囲
background-attachment	scroll	スクロール時の固定有無

記述の順序

仕様上の固定順はありませんが、慣例的に以下の順に書くと読みやすくなります。

1. color
2. image
3. position / size（position/size の形）
4. repeat
5. attachment

size を書くときは必ず position の後ろに / で区切るのがルールです。

/* OK：center の後ろに /cover */
background: url("a.jpg") center/cover no-repeat;

/* NG：size を単独で書くとパースエラー */
background: url("a.jpg") cover no-repeat;

省略時の挙動（重要）

ショートハンドで省略した個別プロパティは初期値にリセットされます。つまり既存の background-repeat: no-repeat が設定されていても、後から background: red; と書くと repeat が初期値の repeat に戻ります。

.card {
  background-repeat: no-repeat;  /* 個別指定 */
  background: #eee;              /* ← repeat が初期値 (repeat) に戻る！ */
}

複数背景

カンマ区切りで複数のレイヤを重ねられます。background-color は最後のレイヤにだけ書きます（最背面）。

.banner {
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),   /* 上 */
    url("/img/hero.jpg") center/cover no-repeat,         /* 中 */
    #222;                                                 /* 下（最背面色） */
  color: #fff;
}

背景色だけ・背景画像だけのとき

/* 背景色だけ */
.btn { background: #3498db; }

/* 背景画像だけ */
.tex { background: url("/img/tex.png") repeat; }

/* 背景をすべて消す */
.reset { background: none; }

注意点

• ショートハンドはすべてリセットするため、個別プロパティを上書きしたいだけのときは個別プロパティで書く
• background-size を含めるなら position/size の形を守る
• 複数背景の順序は上から書いた順に重なる
• background-color は最背面に 1 つだけ

よく見るレシピ集

ショートハンドが活躍する典型シーンをまとめます。コピペで使えるよう値を具体的にしました。

/* 1) ストライプ柄 */
.stripes {
  background: repeating-linear-gradient(45deg, #fafafa 0 10px, #eee 10px 20px);
}

/* 2) チェッカーボード */
.checker {
  background:
    linear-gradient(45deg, #ccc 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(-45deg, #ccc 25%, transparent 25%) 0 10px / 20px 20px,
    linear-gradient(45deg, transparent 75%, #ccc 75%) 10px -10px / 20px 20px,
    linear-gradient(-45deg, transparent 75%, #ccc 75%) -10px 0 / 20px 20px;
}

/* 3) 画像 + 半透明オーバーレイ */
.cover {
  background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
              url("/img/hero.jpg") center/cover no-repeat;
  color: #fff;
}

/* 4) ドット背景 */
.dots {
  background: radial-gradient(#ddd 1px, transparent 1px) 0 0 / 12px 12px;
}

個別プロパティ vs ショートハンドの使い分け

状況	推奨
初期定義（新規 CSS）	ショートハンドで簡潔に
既存スタイルの 1 プロパティだけ上書き	個別プロパティ
ホバー時に画像だけ差し替え	background-image 個別指定
テーマ切り替えで背景色だけ変える	background-color 個別指定

ホバーで背景を切り替える例

.card {
  background: #fff url("/img/icon.svg") right 10px center/24px no-repeat;
  transition: background-color 0.2s;
}
.card:hover {
  background-color: #f5f5f5;  /* 画像はそのまま、色だけ変える */
}

関連

• background-imageプロパティ — 背景画像
• background-color プロパティ — 背景色
• background-size プロパティ — 背景サイズ
• background-position プロパティ — 背景位置
• background-repeat プロパティ — 繰り返し