background-attachmentは、スクロール時の背景画像の動きを指定するプロパティ。
単体で指定したり、組み合わせたりする事で、独特の動きのある表現が可能になります。
background の種類
| . | 値 | 用途 | 親要素 |
|---|---|---|---|
| 1 | background-image | 背景画像、又は、グラデーション | カンマで繋いで複数指定可 |
| 2 | background-attachment | 位置の表示方法 | 固定(fix)するか要素と一緒にスクロールするか等 |
| 3 | background-position | 画像の初期位置 | 最初に表示される位置 |
| 4 | background-size | 画像のサイズ | 要素に対する相対、又は、指定サイズ |
| 5 | background-origin | 要素に対する配置(開始)位置 | 背景の開始点(左上)を指定する |
| 6 | background-clip | 画像自身の配置位置 | 指定に合わせ要素内でクリップされる |
| 7 | background-repeat | 画像の繰り返し | 繰り返しの有無、方向、配置を指定 |
| 8 | background-color | 背景色 |
background-attachment 指定できる値
値ごとに位置 (移動方法) が異なります。
| . | 指定名 | 位置 | 説明 | サイズ基準 |
|---|---|---|---|---|
| 1 | background-attachment: local; | 要素内で移動 | 内容と一緒に移動する | 要素 |
| 2 | background-attachment: scroll; | 要素内で固定 | 要素内で固定されるが、要素と一緒に移動する | 要素 |
| 3 | background-attachment: fixed; | ビューポートに固定 | 要素が移動しても位置が変わらない | ビューポート |
| 4 | scroll + local | 要素内で 固定+移動 | 画像ごとに指定する | — |
background-attachment サンプル
背景画像は個別に動かせるよう、以下の 2種類の画像を重ねがけしています。
共通となるcssはまとめて、それぞれclassを２重掛けにします。
bga1.png- サイズ:
600×350px - タイプ:
png24(透過)
bga2.png- サイズ:
600×350px - タイプ:
png8
共通CSSとHTMLを見る
.bga {
aspect-ratio: 2 / 1; /* 縦横比 */
width: 600px; /* 横幅 */
max-width: 100%; /* 横幅 最大 */
margin-bottom: 24px;
overflow-y: auto; /* 縦スクロール */
border: solid 1px #ccc;
background-image: /* 背景画像 ２重掛け */
url("https://millmi.com/wp/wp-content/uploads/2024/09/bga1.png"),
url("https://millmi.com/wp/wp-content/uploads/2024/09/bga2.png");
background-color: #E4F9FF;
background-size: 100% auto; /* 背景画像 サイズ */
background-repeat: no-repeat; /* 背景画像 繰り返し無 */
}
.bga p {
margin: 20px 15px 10px 45%;
font-size: 16px;
}
.bga p.f14 {font-size: 14px;}<div class="bga"> /* ←値に合わせclassを2重掛けにします */
<p>むかしむかし、ひとりの貧しい王子がいました～～</p>
<p>それにしても、この王子が皇帝のお姫さまにむ～～</p>
<p>では、わたしたちは、そのお話を聞くことにし～～</p>
<p class="f14">ブタ飼い ～～</p>
</div>以下サンプルの要素やビューポートをスクロールしてみてください^^
1 – background-attachment: local;
テキストと一緒に移動。
サイズは要素に準じ、幅100% = 要素幅 となります。
むかしむかし、ひとりの貧しい王子がいました。王子は一つの国をもっていましたが、それはとても小さな国でした。でも、いくら小さいとはいっても、お妃きさきをむかえるのに、ふそくなほどではありませんでした。さて、この王子はお妃をむかえたいと思いました。
それにしても、この王子が皇帝のお姫さまにむかって、「わたくしと結婚してくださいませんか？」などと言うのは、あまりむてっぽうすぎるというものでした。けれども、王子は、思いきって、そうしてみました。なぜって、王子の名前は遠くまで知れわたっていましたし、それに、王子が結婚を申しこめば、よろこんで、はい、と、言いそうなお姫さまは、何百人もいたからです。ところで皇帝のお姫さまは、はい、と、言ったでしょうか？
では、わたしたちは、そのお話を聞くことにしましょう。
ブタ飼い (Hans Christian Andersen)/青空文庫
<div class="bga bga1"> ～～～ </div>.bga1 {
background-attachment: local;
}2 – background-attachment: scroll;
要素内で固定されますが、要素が動くときは一緒に移動します。
サイズは要素に準じ、幅100% = 要素幅 となります。
むかしむかし、ひとりの貧しい王子がいました。王子は一つの国をもっていましたが、それはとても小さな国でした。でも、いくら小さいとはいっても、お妃きさきをむかえるのに、ふそくなほどではありませんでした。さて、この王子はお妃をむかえたいと思いました。
それにしても、この王子が皇帝のお姫さまにむかって、「わたくしと結婚してくださいませんか？」などと言うのは、あまりむてっぽうすぎるというものでした。けれども、王子は、思いきって、そうしてみました。なぜって、王子の名前は遠くまで知れわたっていましたし、それに、王子が結婚を申しこめば、よろこんで、はい、と、言いそうなお姫さまは、何百人もいたからです。ところで皇帝のお姫さまは、はい、と、言ったでしょうか？
では、わたしたちは、そのお話を聞くことにしましょう。
ブタ飼い (Hans Christian Andersen)/青空文庫
<div class="bga bga2"> ～～～ </div>.bga2 {
background-attachment: scroll;
}3 – background-attachment: fixed;
ビューポートに固定され、要素が動いても位置は変わりません。
サイズと位置はビューポートが基準となり、幅100% = ビューポート幅 (top:0, left:0) となる為、注意が必要です。
分かりやすいよう、サンプルは 幅100%のまま にしています。
但し、position: fixed; 同様、要素に transform, filter 等を掛けると要素に固定され、 background-attachment: scroll; と同じ作動になります。
むかしむかし、ひとりの貧しい王子がいました。王子は一つの国をもっていましたが、それはとても小さな国でした。でも、いくら小さいとはいっても、お妃きさきをむかえるのに、ふそくなほどではありませんでした。さて、この王子はお妃をむかえたいと思いました。
それにしても、この王子が皇帝のお姫さまにむかって、「わたくしと結婚してくださいませんか？」などと言うのは、あまりむてっぽうすぎるというものでした。けれども、王子は、思いきって、そうしてみました。なぜって、王子の名前は遠くまで知れわたっていましたし、それに、王子が結婚を申しこめば、よろこんで、はい、と、言いそうなお姫さまは、何百人もいたからです。ところで皇帝のお姫さまは、はい、と、言ったでしょうか？
では、わたしたちは、そのお話を聞くことにしましょう。
ブタ飼い (Hans Christian Andersen)/青空文庫
<div class="bga bga3"> ～～～ </div>.bga3 {
background-attachment: fixed;
}4 – scroll + local (2種類を重ねる)
背景画像を複数設定した場合、値をカンマ','で繋ぐ事で、背景画像ごとにbackground-attachment を対応させる事ができます。
サンプルは気球を固定、背景を移動にしていますが、使い方次第で色々面白い表現ができますよ^^
むかしむかし、ひとりの貧しい王子がいました。王子は一つの国をもっていましたが、それはとても小さな国でした。でも、いくら小さいとはいっても、お妃きさきをむかえるのに、ふそくなほどではありませんでした。さて、この王子はお妃をむかえたいと思いました。
それにしても、この王子が皇帝のお姫さまにむかって、「わたくしと結婚してくださいませんか？」などと言うのは、あまりむてっぽうすぎるというものでした。けれども、王子は、思いきって、そうしてみました。なぜって、王子の名前は遠くまで知れわたっていましたし、それに、王子が結婚を申しこめば、よろこんで、はい、と、言いそうなお姫さまは、何百人もいたからです。ところで皇帝のお姫さまは、はい、と、言ったでしょうか？
では、わたしたちは、そのお話を聞くことにしましょう。
ブタ飼い (Hans Christian Andersen)/青空文庫
<div class="bga bga4"> ～～～ </div>.bga4 {
background-attachment: scroll, local;
}