Feb. 13th,2021
プロパティについて
値
| 値 | 説明 |
|---|---|
| “<attachment>”値 | |
| fixed | 背景画像をビューポートに対する相対位置で固定します (要素がスクロール可能な場合、スクロールしても背景画像は動きません。ページ化メディアである場合はページ・ボックスに対する相対位置で固定され、背景画像はすべてのページに複製されます。) |
local |
背景画像を要素のコンテンツに対する相対位置で固定します (要素がスクロール可能な場合、スクロールするとコンテンツとともに背景画像も動きます。背景の表示領域と配置位置は要素のスクロール可能な領域に依存します。“background-clip”プロパティの値に“border-box”を指定した場合は“padding-box”の場合と同様に扱われる場合があります。) |
| scroll | 背景画像を要素に対する相対位置で固定します (要素がスクロール可能な場合、スクロールしても背景画像は動きません。) |
| 他の値 | |
| 共通キーワード | |
複数の背景画像を指定する
“background-image”プロパティで複数の背景画像が指定されている場合、値を“,(コンマ)”で区切って記述することでそれぞれの背景画像の固定を指定することができます。値の順番は“background-image”プロパティで指定した値の順番に対応します。
div {
background-image: 〚一番手前の背景画像〛,〚手前から2番目の背景画像〛,〚手前から3番目の背景画像〛,...,〚一番奥の背景画像〛;
background-attachment: 〚一番手前の背景画像の設定〛,〚手前から2番目の背景画像の設定〛,〚手前から3番目の背景画像の設定〛,...,〚一番奥の背景画像の設定〛;
}
使用例
背景画像をビューポートに固定する
div {
background-attachment: fixed;
}
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
背景画像を固定しない
div {
background-attachment: local;
}
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
背景画像を要素に固定する
div {
background-attachment: scroll;
}
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
複数の背景画像を指定する
div {
background-image: url(sample/background_sample.png), url(background_sample2.png);
background-repeat: repeat-x,repeat-y;
background-attachment: fixed,scroll;
}
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
