background-attachment:背景画像のスクロールを指定する

初期値 scroll
適用対象 全ての要素、::first-letterおよび::first-line
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

background-attachmentプロパティの説明

background-attachmentは、画面のスクロールに対して背景画像を固定するか、移動するかを指定します。これはビューポートに含まれる要素が背景画像を持つ場合に、一緒にスクロールするか固定するかを選べることを意味します。

背景に関するプロパティを一括で指定する場合は、backgroundを使用して下さい。

background-attachmentに指定できる値

scroll
背景は要素に対する相対位置で固定され、画面のスクロールに合わせて要素と共に移動します。要素の内容がスクロールする場合は、その動きに追随しません。これが初期値です。
local
背景は要素の内容に対する相対位置で固定されます。画面のスクロールに合わせて移動し、要素の内容がスクロールする場合も、その動きに追随します。
fixed
背景をビューポートに対する相対位置で固定します。画面や要素がスクロールされても背景画像は動きません。この値は、background-clipの値がtextの場合、併用できません。

background-attachmentの使い方とサンプル

background-attachmentプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* グローバル値 */
background-attachment: inherit;
background-attachment: initial;
background-attachment: revert;
background-attachment: unset;

background-attachmentの実例

まずは実際の挙動を確かめてみましょう。background-attachmentの値を変えると、親要素をスクロールした時と、内容そのものをスクロールした時とで、背景の動きに違いが出ます。

表示確認

上記のサンプルのソース・コードは以下になります。各ボックスを分解して個別に見られるサンプルも、その下に用意してあります。一部の環境ではfixedが正常に機能しないため、実装する前にブラウザの対応状況を確認して下さい。

CSS
.samp_box {
	min-height: 500px;
	padding: 1rem;
	background: #ccc;
}
.samp_box > div {
	display: flex;
	flex-wrap: nowrap;
	gap: 0 1rem;
	margin-top: 1rem;
}
div > div {
	flex: 1;
	height: 200px;
	padding: 10px;
	overflow: scroll;
	border: 1px solid #333;
	background: url(../images/sample_bg2.png) repeat;
}
div > p {
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
}
#box_1 {
	background-attachment: scroll;
}
#box_2 {
	background-attachment: local;
}
#box_3 {
	background-attachment: fixed;
}
HTML

<section class="samp_box">
	<div>
		<div id="box_1">
			<p>scroll</p>
			〜
			<p>scroll</p>
		</div>
		<div id="box_2">
			<p>local</p>
			〜
			<p>local</p>
		</div>
		<div id="box_3">
			<p>fixed</p>
			〜
			<p>fixed</p>
		</div>
	</div>
</section>

background-attachment: scroll;

background-attachmentプロパティの値がscrollの場合。

表示確認

background-attachment: local;

background-attachmentプロパティの値がlocalの場合。

表示確認

background-attachment: fixed;

background-attachmentプロパティの値がfixedの場合。

表示確認

background-attachmentに関連するCSSプロパティ

背景(バックグラウンド)
background 背景に関する指定をまとめて行う
background-attachment 背景画像の固定・移動を指定する
background-blend-mode 背景色や背景画像の描画モードを指定する
background-clip 背景の描画範囲を指定する
background-color 背景色を指定する
background-image 背景画像やグラデーションを指定する
background-origin 背景画像を配置する基準点を指定する
background-position 背景画像の表示開始位置を指定する
background-repeat 背景画像の繰り返しを指定する
background-size 背景画像を表示するサイズ(大きさ)を指定する
backdrop-filter 要素の背後領域にぼかしや色変化などのフィルタ効果を与える