Background(背景)

[CSS] background-attachment

この記事は最終更新から２年以上経過しており、内容が古い可能性があります

CSS の background-attachment は、 背景画像の固定やスクロールを設定するプロパティです。

background-imageと組み合わせてショートハンド(一括指定) background を利用できます。

同じテーマの記事
このページの目次
  1. background-attachment の詳細
    1. 利用できる値
    2. ブラウザ対応状況 (2020/07 現在)
      1. local
      2. scroll, fixed

background-attachment Code DEMO

デモをスクロールすると違いが確認できます。

  • 共通code background-image: url(img/2716b.png);
    overflow-y: scroll;

他の値を持つ場合があります。詳細は以下をご確認下さい

background-attachment の詳細

利用できる値

スクロール (初期値)
local

要素の内容と連動してスクロールする

固定
scroll

要素の表示範囲に固定されスクロールしない。
画面を動かした場合は、要素と一緒に動く

固定
fixed

ビューポート(画面)に固定されスクロールしない。
画面を動かした場合も要素とは連動せず、固定したままとなる

background-attachment の複数指定

複数の背景画像を利用している場合
カンマ ‘ , ‘ で繋ぐことで、背景画像ごとに位置を指定する事ができます。
左(最初に書かれたもの)が一番上、右に行くほど下の画像に対応します。

background-image: url(img/sanple1.png), url(img/sanple2.png); 
background-attachment: scroll, local;

background-attachment 設定時の注意

  • 未対応ブラウザに scroll 又は fixed を指定した場合、local が適用されます。
  • 何も指定しない場合は、local(初期値) が適用されます。
  • positionで位置指定がある場合を除き、local, scroll は要素の右上が起点となります。
  • fixed は画面右上が起点です。位置指定はできません。

ブラウザ対応状況 (2020/07 現在)

local

  • 〇
  • 〇
  • 〇
  • 〇
  • 〇
  • 〇
  • 〇
  • 〇

scroll, fixed

  • 〇
  • 〇
  • 〇
  • 〇
  • 〇
  • 〇
  • ×
  • ×

※ Androidは、 AndroidBrowserのみ未対応 (Chrome,Firefoxは対応)

※より詳細な情報、最新情報、他バージョン対応などを確認されたい場合は Can I use 等のチェックサイトでお調べ下さいm(__)m

同じテーマの記事