background-attachment

背景画像を、スクロールしたときにどの基準へ留めるか決めるプロパティ。要素・内容・画面の3つの基準を比べます。

CSSの`background-attachment`とは？

scroll・local・fixedをライブプレビューで切り替えながら、背景画像が要素・内容・ビューポートのどこに留まるかを初学者向けに解説します。

遊んでみよう

枠の中とページをスクロールして背景の基準を比較

背景は要素自体の位置に留まります

CSS

.element background-attachment: scroll;

値のパターン

背景画像の固定基準 background-attachment

background-attachmentの構成要素

01background-attachment

背景画像の固定基準

スクロール時に背景画像がどこに留まるかを指定します。

02scroll | local | fixed

3つの基準

要素自体、要素の内容、ビューポートから、背景を固定する対象を選びます。

03background-image

背景画像に適用する

画像ファイルや、背景画像として扱われるグラデーションが動く基準を変えます。

早見表

初期値はscrollです。プレビュー内をスクロールし、模様が要素に留まるか、内容と一緒に動くかを比べます。

01scroll背景を要素自体に固定初期値

02local背景をスクロール内容に固定内容と一緒に動く

03fixed背景をビューポートに固定ページに留まる

04fixed, scroll背景画像ごとに固定方法を指定カンマ区切り

よくある使い方

読み物の背景模様を枠に留める

初期値のscrollでは、長い内容をスクロールしても背景模様は要素自体の位置に留まります。

.article { overflow: auto; background-attachment: scroll; }

内容と背景を一緒にスクロールする

localは背景をスクロールする内容に結びつけ、文章と模様の位置関係を保ちます。

.notes { overflow: auto; background-attachment: local; }

画面に留まるヒーロー背景を作る

fixedを使うと、要素がページと一緒に動いても、背景画像はビューポートに固定されます。

.hero { background-attachment: fixed; background-position: center; background-size: cover; }

ポイント

scrollは「要素」、localは「内容」、fixedは「画面」。

background-attachmentは背景画像の固定基準を決めるプロパティで、スクロールバー自体を作るものではありません。初期値はscrollで、すべての要素と::first-letter・::first-lineに適用でき、子要素へは継承されません。アニメーションでは離散的に切り替わります。fixedは背景の位置をビューポート基準にします。複数の背景画像には、カンマ区切りで画像ごとの値を指定できます。