【CSS】background-attachment - 背景画像のスクロール
CSSのbackground-attachmentプロパティについてご紹介します。
background-attachment
background-attachmentは背景画像のスクロールを示すプロパティです。
基本構文
background-attachment: 値;値
一般的な値は次の通りです。
| 値 | 意味 |
|---|---|
| scroll | コンテンツのスクロールに伴って移動しません。 |
| fixed | コンテンツまたはページのスクロールに伴って移動しません。 |
| local | 画像はコンテンツ内に固定され、スクロールに伴って移動します。 |
サンプル
scroll
<style>
div {
width: 200px;
height: 400px;
border: 1px solid black;
overflow-y: scroll;
background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
background-repeat: no-repeat;
background-position: 15px 15px;
background-attachment: scroll;
}
</style>
<div>ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ</div>fixed
<style>
div {
width: 200px;
height: 400px;
border: 1px solid black;
overflow-y: scroll;
background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
background-repeat: no-repeat;
background-position: 15px 15px;
background-attachment: fixed;
}
</style>
<div>ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ</div>local
<style>
div {
width: 200px;
height: 400px;
border: 1px solid black;
overflow-y: scroll;
background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
background-repeat: no-repeat;
background-position: 15px 15px;
background-attachment: local;
}
</style>
<div>ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ</div>
