見える開発

background

背景の色や画像、位置などを1つの宣言へまとめる一括指定プロパティ。値を組み合わせて背景を完成させます。

CSSのbackgroundとは？

色・画像・位置・大きさ・繰り返し・固定方法をライブプレビューで組み合わせながら、一括指定の構文と省略時の注意点を初学者向けに解説します。

遊んでみよう

LIVE PREVIEW
画像 位置 / 大きさ 繰り返し 固定方法 色
グラデーション・center / cover・繰り返しなし・scroll・#d9d2ff
CSS
.element background: linear-gradient(135deg, #7258e8 0 45%, #ffc4b7 45% 100%) center / cover no-repeat scroll #d9d2ff;

値のパターン

backgroundの構成要素

01background

背景の一括指定

背景に関する複数のプロパティを、1つのCSS宣言へまとめます。

02position / size

位置と大きさをスラッシュで区切る

大きさを書くときは、必ず位置の直後へ「/」を置いて区切ります。

03image repeat attachment color

背景レイヤーの構成要素

画像、繰り返し、固定方法、最後の背景色を組み合わせます。

04origin clip

配置基準と描画範囲

ボックス値を1つ書くとoriginとclipの両方、2つ書くと1つ目がorigin、2つ目がclipになります。

早見表

backgroundは8つの背景プロパティをまとめます。遊んでみようでは変化を比べやすい6項目を操作し、originとclipは早見表と個別教材で確認します。省略した構成要素は、以前の値を残さずそれぞれの初期値へ戻ります。

01#ffe28a背景色だけを指定最も短い形
02url(...) center / cover no-repeat画像を枠全体へ表示/ の前は位置
03linear-gradient(...)グラデーションを背景画像にする画像として扱う
04repeat scroll繰り返しと固定方法を指定順序は柔軟
05padding-box border-box配置基準と描画範囲を別々に指定origin → clipの順
06layer 1, layer 2, color複数の背景を重ねる色は最後だけ

よくある使い方

01

ヒーロー画像を枠全体へ広げる

画像を中央へ置き、coverで枠を覆い、読み込み前にも見える背景色を最後に指定します。

.hero { background: url("hero.jpg") center / cover no-repeat #202033; }
02

CSSだけで繰り返し模様を作る

小さなグラデーション画像の大きさを決め、repeatで要素全体へ並べます。

.pattern { background: radial-gradient(circle, #7258e8 8px, transparent 9px) 0 0 / 48px 48px repeat #dafa65; }
03

カードを単色で塗り直す

色だけを書くと、以前の背景画像や位置なども初期値へ戻るため、背景を確実に置き換えられます。

.card { background: #ffe28a; }

ポイント

backgroundは、省略した値も初期値へ戻します。

backgroundはbackground-image・position・size・repeat・origin・clip・attachment・colorをまとめる一括指定です。すべての要素と::first-letter・::first-lineに適用でき、子要素へは継承されません。sizeはpositionの直後へ「/」で区切り、背景色は複数レイヤーの最後だけに書きます。背景画像だけを変えたい場面でbackgroundを使うと、ほかの背景設定まで初期値へ戻る点に注意します。重要な情報は背景画像だけに頼らず、本文にも用意します。

background と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。