この記事の要点

背景関連プロパティは要素の背景を制御。色 / 画像 / グラデーション / 繰り返しを指定 主要 8 プロパティ: color / image / repeat / position / size / attachment / origin / clip 一括指定: background: #fff url(bg.png) no-repeat center/cover; グラデーション: linear-gradient() / radial-gradient() / conic-gradient() — 画像不要 複数背景の重ね: カンマ区切りで上から順に重ねる — 最後が一番下

CSS 背景関連プロパティ概観

CSS の background 系プロパティは要素の背景色・背景画像・グラデーションを制御します。8 つの個別プロパティと background 一括指定があり、組み合わせるとリッチなビジュアルを作れます。

プロパティ	用途	例
background-color	背景色	#f5f5f5 / rgba(0,0,0,0.5)
background-image	背景画像 / グラデーション	url(bg.png) / linear-gradient(...)
background-repeat	繰り返し方向	no-repeat / repeat-x
background-position	位置	center / 50% 50% / top right
background-size	サイズ	cover / contain / 100% auto
background-attachment	スクロール固定	fixed / scroll
background-origin	原点 (border-box 等)	padding-box / content-box
background-clip	描画範囲	border-box / text

background-color — 背景色

/* 色指定の各種記法 */
.a { background-color: #ff6b6b; }                   /* HEX */
.b { background-color: rgb(255, 107, 107); }        /* RGB */
.c { background-color: rgba(255, 107, 107, 0.5); }  /* 透過つき */
.d { background-color: hsl(0, 100%, 71%); }         /* HSL */
.e { background-color: hsla(0, 100%, 71%, 0.5); }   /* HSL 透過 */
.f { background-color: transparent; }               /* 透明 */
.g { background-color: currentColor; }              /* 文字色と同じ */

background-image — 画像 / グラデーション

/* 画像 */
.hero {
    background-image: url('/img/hero.jpg');
    background-size: cover;
    background-position: center;
}

/* リニアグラデーション */
.btn {
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* ラジアルグラデーション */
.spot {
    background-image: radial-gradient(circle at top right, #ffd700, transparent 70%);
}

/* コニックグラデーション */
.pie {
    background-image: conic-gradient(red 0deg 90deg, yellow 90deg 180deg, green 180deg);
}

background-size — サイズ調整

値	意味
auto	画像の元サイズ (初期値)
cover	要素を覆い尽くす最小サイズ。一部はみ出す
contain	要素内に収まる最大サイズ。隙間ができることも
100% 100%	要素いっぱいに引き伸ばす（変形あり）
200px auto	幅 200px、高さは比率維持

background-repeat — 繰り返し

.no   { background-repeat: no-repeat; }      /* 繰り返さない */
.x    { background-repeat: repeat-x; }       /* 横のみ */
.y    { background-repeat: repeat-y; }       /* 縦のみ */
.both { background-repeat: repeat; }         /* 縦横（初期値） */
.sp   { background-repeat: space; }          /* 均等間隔 */
.rd   { background-repeat: round; }          /* 整数倍に拡縮 */

background 一括指定

/* 構文:
   background: color image position/size repeat attachment origin clip;
*/
.hero {
    background: #1e293b url('/img/hero.jpg') no-repeat center/cover fixed;
}

/* 多くの場合はシンプルにこれで OK */
.btn {
    background: linear-gradient(to right, #667eea, #764ba2);
}

複数背景を重ねる

カンマ区切りで上から順に重ねます。最後が一番下のレイヤー。

.section {
    background:
        /* 上: 半透明オーバーレイ */
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        /* 中: パターン */
        url('/img/pattern.png') repeat,
        /* 下: 背景画像 */
        url('/img/hero.jpg') no-repeat center/cover,
        /* 最終フォールバック色 */
        #1e293b;
}

定番テクニック

背景を要素いっぱいに配置

.full-bg {
    background-image: url('/img/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

背景固定スクロール (パララックス風)

.parallax {
    background-image: url('/img/hero.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    height: 100vh;
}

注意: モバイル Safari では fixed が無効化される。position: sticky や IntersectionObserver 系の JS 実装で代替。

グラデーション ボタン

.btn-gradient {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 0.6em 1.2em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: filter 0.2s;
}
.btn-gradient:hover {
    filter: brightness(1.1);
}

テキストにグラデーションをかける

.gradient-text {
    background: linear-gradient(90deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

FAQ

Q: background-color と color どちらが先？
A: color は文字色、background-color は背景色。同時指定可。コントラスト比は 4.5:1 以上が WCAG AA。

Q: cover と contain の違い
A: cover = 要素を必ず満たす（はみ出し OK）、contain = 要素に必ず収める（余白 OK）。

Q: パフォーマンス的に画像とグラデどっち？
A: 装飾ならグラデーション CSS の方が軽い（ファイル取得なし）。複雑な絵柄は WebP / AVIF。