background-attachment:背景画像のスクロールを指定する
初期値 | scroll |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
background-attachmentプロパティの説明
background-attachment
は、画面のスクロールに対して背景画像を固定するか、移動するかを指定します。これはビューポートに含まれる要素が背景画像を持つ場合に、一緒にスクロールするか固定するかを選べることを意味します。
背景に関するプロパティを一括で指定する場合は、background
を使用して下さい。
background-attachmentに指定できる値
- scroll
- 背景は要素に対する相対位置で固定され、画面のスクロールに合わせて要素と共に移動します。要素の内容がスクロールする場合は、その動きに追随しません。これが初期値です。
- local
- 背景は要素の内容に対する相対位置で固定されます。画面のスクロールに合わせて移動し、要素の内容がスクロールする場合も、その動きに追随します。
- fixed
- 背景をビューポートに対する相対位置で固定します。画面や要素がスクロールされても背景画像は動きません。この値は、
background-clip
の値がtext
の場合、併用できません。
background-attachmentの使い方とサンプル
background-attachment
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
/* グローバル値 */
background-attachment: inherit;
background-attachment: initial;
background-attachment: revert;
background-attachment: unset;
background-attachmentの実例
まずは実際の挙動を確かめてみましょう。background-attachment
の値を変えると、親要素をスクロールした時と、内容そのものをスクロールした時とで、背景の動きに違いが出ます。
表示確認
上記のサンプルのソース・コードは以下になります。各ボックスを分解して個別に見られるサンプルも、その下に用意してあります。一部の環境ではfixed
が正常に機能しないため、実装する前にブラウザの対応状況を確認して下さい。
CSS
.samp_box {
min-height: 500px;
padding: 1rem;
background: #ccc;
}
.samp_box > div {
display: flex;
flex-wrap: nowrap;
gap: 0 1rem;
margin-top: 1rem;
}
div > div {
flex: 1;
height: 200px;
padding: 10px;
overflow: scroll;
border: 1px solid #333;
background: url(../images/sample_bg2.png) repeat;
}
div > p {
background: rgba(0, 0, 0, 0.4);
color: #fff;
}
#box_1 {
background-attachment: scroll;
}
#box_2 {
background-attachment: local;
}
#box_3 {
background-attachment: fixed;
}
HTML
<section class="samp_box">
<div>
<div id="box_1">
<p>scroll</p>
〜
<p>scroll</p>
</div>
<div id="box_2">
<p>local</p>
〜
<p>local</p>
</div>
<div id="box_3">
<p>fixed</p>
〜
<p>fixed</p>
</div>
</div>
</section>
background-attachment: scroll;
background-attachment
プロパティの値がscroll
の場合。
表示確認
background-attachment: local;
background-attachment
プロパティの値がlocal
の場合。
表示確認
background-attachment: fixed;
background-attachment
プロパティの値がfixed
の場合。
表示確認
background-attachmentに関連するCSSプロパティ
背景(バックグラウンド) | |
---|---|
background | 背景に関する指定をまとめて行う |
background-attachment | 背景画像の固定・移動を指定する |
background-blend-mode | 背景色や背景画像の描画モードを指定する |
background-clip | 背景の描画範囲を指定する |
background-color | 背景色を指定する |
background-image | 背景画像やグラデーションを指定する |
background-origin | 背景画像を配置する基準点を指定する |
background-position | 背景画像の表示開始位置を指定する |
background-repeat | 背景画像の繰り返しを指定する |
background-size | 背景画像を表示するサイズ(大きさ)を指定する |
backdrop-filter | 要素の背後領域にぼかしや色変化などのフィルタ効果を与える |