背景
background-attachment
background-attachment は、背景画像を要素の枠・要素の中身・画面のどれに合わせて置き、スクロールしたときにどう動かすかを指定します。
構文
<attachment>#プレビュー
1. The quick brown fox2. The quick brown fox3. The quick brown fox4. The quick brown fox5. The quick brown fox6. The quick brown fox7. The quick brown fox8. The quick brown fox9. The quick brown fox10. The quick brown fox11. The quick brown fox12. The quick brown fox13. The quick brown fox14. The quick brown fox15. The quick brown fox16. The quick brown fox
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
overflow: auto;
background-image: linear-gradient(#88d1c7, #77a7d7, #eaac3a);
background-attachment: local;
}コントロール
background-attachmentlocal
1. The quick brown fox2. The quick brown fox3. The quick brown fox4. The quick brown fox5. The quick brown fox6. The quick brown fox7. The quick brown fox8. The quick brown fox9. The quick brown fox10. The quick brown fox11. The quick brown fox12. The quick brown fox13. The quick brown fox14. The quick brown fox15. The quick brown fox16. The quick brown fox
解説
値の意味
scroll：初期値です。背景は要素の枠に合わせて置かれます。ページをスクロールすると要素といっしょに動きますが、要素の中をスクロールしても背景は動きません。local：背景は要素の中身（スクロールして見える範囲全体）に合わせて置かれ、要素の中をスクロールすると中身といっしょに動きます。fixed：背景は画面（ビューポート）に合わせて置かれ、ページをスクロールしても動きません。要素は、画面に固定された背景をのぞく窓のようになります。
使いどころ
- スクロールする箱の中で、背景も文章といっしょに流したいときに
localを使います。 - ページをスクロールしても背景の写真が止まって見える演出に
fixedを使います。
気をつけること
backgroundショートハンドはbackground-attachmentを初期値に戻すので、ショートハンドより後に書きます。- iPhone・iPad の Safari では
fixedが効かず、scrollと同じ見え方になります。 - 背景を重ねたときは、
local, scrollのようにコンマで区切って 1 枚ずつ指定できます（このページのコントロールは 1 つだけです）。
このページのプレビューでは、補助の宣言で箱をスクロールできるようにして（overflow: auto）、上から下へのグラデーションを背景にしています。箱の中には、箱の 2 倍ほどの高さになる行が並んでいます。scroll ではグラデーションが箱の高さに収まり、local では中身の高さまで伸びて、箱の中をスクロールすると文章といっしょに動きます。fixed では画面の高さまで伸びた一部が見えます。