複数背景）

この記事の要点

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`	スクロール時の固定有無

記述の順序

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

color
image
position / size（position/size の形）
repeat
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;  /* 画像はそのまま、色だけ変える */
}

ページ一覧

その他