プロパティ background-attachment

プロパティ background-attachment は、要素の背景画像をどのようにスクロールさせるかを設定します：テキストと一緒に、またはテキストが画像の上を滑るように。

構文

セレクタ {
	background-attachment: fixed | scroll | local;
}

値

値	説明
`fixed`	背景画像は固定され、テキストがその上を滑るようにスクロールします。
`scroll`	背景画像はテキストと一緒にスクロールします。
`local`	要素の動作を考慮して背景を固定します。要素がスクロールを持つ場合、背景はコンテンツと一緒にスクロールしますが、要素の枠を超える背景部分はその場に留まります。

デフォルト値: scroll。

例 . 値 scroll

現在、プロパティ background-attachment は値 scroll に設定されています。要素を垂直方向にスクロールしてください - テキストが背景と一緒にスクロールするのがわかります：

<body>
	<div id="elem">
		some long text
	</div>
</body>

body {
	background-attachment: scroll;
	background-image: url("bg.png");
}

#elem {
	width: 400px;
	margin: 0 auto;
	text-align: justify;
	font-weight: bold;
	font-size: 20px;
}

例 . 値 fixed

今度はプロパティ background-attachment を値 fixed に設定しました。要素を垂直方向にスクロールしてください - テキストが背景の上を滑るようにスクロールするのがわかります：

<body>
	<div id="elem">
		some long text
	</div>
</body>

body {
	background-attachment: fixed;
	background-image: url("bg.png");
}

#elem {
	width: 400px;
	margin: 0 auto;
	text-align: justify;
	font-weight: bold;
	font-size: 20px;
}

プロパティ background-attachment

構文

値

例 . 値 scroll

例 . 値 fixed

関連項目