このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

background-attachment:背景画像の固定

記事Feb. 13th,2021
背景画像を固定するかどうかを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 background-attachment: scroll;
適用対象 すべての要素
継承 しない
パーセント値 パーセント値は指定できません
計算値 指定したキーワードをアイテムとするリスト
アニメーション 離散

background-attachment”プロパティは要素の背景画像をビューポートに相対的に固定するか、それともスクロールとともに動くかどうかを指定するプロパティです。

サンプルコード

div { background-attachment: fixed;}

説明
<attachment>”値
fixed 背景画像をビューポートに対する相対位置で固定します (要素がスクロール可能な場合、スクロールしても背景画像は動きません。ページ化メディアである場合はページ・ボックスに対する相対位置で固定され、背景画像はすべてのページに複製されます。)
localCSS Backgrounds and Borders Module Level 3 で追加 背景画像を要素のコンテンツに対する相対位置で固定します (要素がスクロール可能な場合、スクロールするとコンテンツとともに背景画像も動きます。背景の表示領域と配置位置は要素のスクロール可能な領域に依存します。background-clip”プロパティの値に“border-box”を指定した場合は“padding-box”の場合と同様に扱われる場合があります。)
scroll 背景画像を要素に対する相対位置で固定します (要素がスクロール可能な場合、スクロールしても背景画像は動きません。)
他の値
共通キーワード

複数の背景画像を指定する

background-image”プロパティで複数の背景画像が指定されている場合、値を“,(カンマ)”で区切って記述することでそれぞれの背景画像の固定を指定することができます。値の順番はbackground-image”プロパティで指定した値の順番に対応します。

div {
background-image: 〚一番手前の背景画像〛,〚手前から2番目の背景画像〛,〚手前から3番目の背景画像〛,...,〚一番奥の背景画像〛;
background-attachment: 〚一番手前の背景画像の設定〛,〚手前から2番目の背景画像の設定〛,〚手前から3番目の背景画像の設定〛,...,〚一番奥の背景画像の設定〛;
}

仕様書

Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
background-attachment
定義あり

定義あり

定義あり
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
fixed
定義あり

定義あり

定義あり
scroll
定義あり

定義あり

定義あり
local
定義なし

定義なし

定義あり

使用例

背景画像をビューポートに固定する

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;
}

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月の頃はさらなり、闇もなほ、螢飛びちがひたる。雨など降るも、をかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク