background-attachment: scroll- 例

<!DOCTYPE html>
<html>
<head>
<style>
body {
 background-image: url("/i/css/tree.png");
 background-repeat: no-repeat;
 background-position: right top;
 margin-right: 200px;
 background-attachment: scroll;
}
</style>
</head>
<body>

<h1>background-attachment属性</h1>

background-attachment 属性は、背景画像をスクロールするか固定する (ページの残りの部分と一緒にスクロールしない) かを指定します。

ヒント: スクロール バーが表示されない場合は、ブラウザ ウィンドウのサイズを変更してみてください。

背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
背景画像がスクロールします。 ページを下にスクロールしてみてください。 
</body>
</html>

W3School TIY Editor