background-attachmentプロパティの説明
CSSのbackground-attachmentプロパティは、画面のスクロールに対して背景画像を固定するか、移動するかを指定します。これはビューポートに含まれる要素が背景画像を持つ場合に、一緒にスクロールするか固定するかを選べることを意味します。
背景に関するプロパティを一括で指定する場合は、backgroundを使用して下さい。
background-attachmentに指定できる値
scroll- 背景は要素に対する相対位置で固定され、画面のスクロールに合わせて要素と共に移動します。要素の内容がスクロールする場合は、その動きに追随しません。これが初期値です。
local- 背景は要素の内容に対する相対位置で固定されます。画面のスクロールに合わせて移動し、要素の内容がスクロールする場合も、その動きに追随します。
fixed- 背景をビューポートに対する相対位置で固定します。画面や要素がスクロールされても背景画像は動きません。この値は、
background-clipの値がtextの場合、併用できません。
background-attachmentの使い方とサンプルコード
background-attachmentプロパティの構文は以下の通りです。
/* キーワード値 */
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が正常に機能しないため、実装する前にブラウザの対応状況を確認して下さい。
<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>
.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;
}
background-attachment: scroll;
background-attachmentプロパティの値がscrollの場合。
background-attachment: local;
background-attachmentプロパティの値がlocalの場合。
background-attachment: fixed;
background-attachmentプロパティの値がfixedの場合。