箱の中をスクロールすると背景も動く？background-attachmentのscrollとlocalを比べよう

小さな箱の中をスクロールしたら、文章は動くのに背景の模様は同じ場所にある。この背景も文章と一緒に動かしたい場合は、background-attachmentのlocalが候補になるよ。

このページでは、スクロールする箱に付けた背景を、scrollとlocalで比べる。ブラウザだけで操作できるよ。画面全体ではなく、ページ内の小さな箱の中を動かす点に注目しよう。

文章と背景は、別の指定で描かれる

作例の箱には、表示する高さより長い文章を入れている。overflow:autoは、必要に応じて内容をスクロールできるようにする指定だよ。

.stage {
  height: 150px;
  overflow: auto;
  background-attachment: scroll;
}

これとは別に、黄色・紫・緑の帯が並ぶ背景画像を付けている。背景画像は説明用の小さなSVGを作例内へ埋め込み、外部の画像を読み込まないようにしているよ。

scrollでは、内容だけ動いても背景はその箱の位置

background-attachmentの初期値はscroll。この場合、背景は要素自身と一緒に動く。箱の中の内容をスクロールしても、背景は内容に合わせて動くわけではないよ。

名前がscrollなので、背景も必ず文章と一緒に動くと思いやすいけれど、何をスクロールしているかを分ける必要があるんだ。

ページ全体を動かして箱自身の位置が変われば、背景もその箱と一緒に移動する。今回比べるのは、箱の位置を保ったまま、中の文章だけをスクロールする状態だよ。

localでは、スクロールする内容に合わせる

.stage {
  background-attachment: local;
}

localは、その要素のスクロールする内容に合わせて背景を描く。文章を下へ読み進めると、背景の帯も動いて見えるよ。背景画像の位置や描画範囲も、スクロールする領域を基準に扱われる。

どちらも背景画像そのものを増やしたり、拡大したりする指定ではない。作例では同じ画像・同じ繰り返し・同じ大きさを固定し、attachmentだけを切り替えている。

同じ60pxの位置で比べる

1. scrollのまま、左側に見える色の帯を覚える。
2. 「60px下へ」を押す。文章は動くが、帯は同じ場所に残ることを見る。
3. スクロール位置を変えずにlocalへ切り替え、背景の帯が別の位置になることを見る。
4. 「先頭へ」で0pxへ戻す。
5. 「最初から試す」でscroll・0pxの初期状態へ戻す。

直接箱の中をスクロールしても試せる。表示欄には、背景の指定と内容のスクロール位置を別に表示しているよ。左側には文字が重ならない帯の観察用の場所を空けている。

fixedとは別の比較

background-attachmentには、表示領域を基準に背景を固定するfixedもある。今回のlocalを、画面に固定する意味だと考えないでね。このページでは、小さなスクロール領域でscrollとlocalの違いだけを確かめている。

実際の画面で背景が動かないときは、そもそもその要素の内容がスクロールしているか、祖先の別の箱を動かしていないかも確認しよう。指定した要素と、動かしている要素が違うと、期待した比較にならないよ。

編集部では2026年10月29日にMDNを確認し、スマホ幅・PC幅で0pxと60pxの背景の実画素、指定変更、リセットを検証した。実機のスマートフォンでの操作試験を示すものではないよ。overflowの基本、背景の繰り返しも合わせて見てみよう。