プロパティ background-attachment

プロパティ background-attachment は、要素の背景画像をどのようにスクロールさせるかを設定します：テキストと一緒に、またはテキストが画像の上を滑るように。

構文

cssセレクタ {
  background-attachment: fixed | scroll | local;
}

値

値	説明
`fixed`	背景画像は固定され、テキストがその上を滑るようにスクロールします。
`scroll`	背景画像はテキストと一緒にスクロールします。
`local`	要素の動作を考慮して背景を固定します。要素がスクロールを持つ場合、背景はコンテンツと一緒にスクロールしますが、要素の枠を超える背景部分はその場に留まります。

デフォルト値: scroll。

例 . 値 scroll

現在、プロパティ background-attachment は値 scroll に設定されています。要素を垂直方向にスクロールしてください - テキストが背景と一緒にスクロールするのがわかります：

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: scroll;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

例 . 値 fixed

今度はプロパティ background-attachment を値 fixed に設定しました。要素を垂直方向にスクロールしてください - テキストが背景の上を滑るようにスクロールするのがわかります：

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: fixed;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

プロパティ background-attachment

構文

値

例 . 値 scroll

例 . 値 fixed

関連項目