background-attachment の概要
CSSプロパティ「background-attachement」は、背景画像がviewport によって固定されるか、スクロールするるかを設定できます。background-image で背景が設定されていない場合、この設定値は無視されます。
<p>下にスクロールしてください。背景がViewportに固定されています。</p>
<div class="box ahoy"></div>
<div class="box kitty"></div>
<div class="box plaid"></div>
<div class="box subway"></div>
<style>
.box{
height:260px;
background-attachment: fixed;
}
.box.ahoy{
background-image: url(https://www-creators.com/wp-content/uploads/2017/10/ahoy.jpg);
}
.box.kitty{
background-image: url(https://www-creators.com/wp-content/uploads/2017/10/kitty.png)
}
.box.plaid{
background-image: url(https://www-creators.com/wp-content/uploads/2017/10/science.png)
}
.box.subway{
background-image: url(https://www-creators.com/wp-content/uploads/2017/10/subway-lines.png)
}
</style>値と解説
background-attachement の値は下記のキーワードで設定されます。
| 値 | 解説 |
|---|---|
| fixed | 背景画像は、viewport に対して固定されます。もし背景を設定した要素がスクロールしても、背景画像がスクロールすることはありません。 |
| local | 背景画像は、その要素に対して固定されます。もし要素のコンテンツがスクロールすれば、背景画像も共にスクロールします。背景の描画領域はスクロールするコンテンツ側に対して配置されます。 |
| scroll | 背景画像は、要素自体に固定され、要素のコンテンツと共にスクロールすることはありません。 |