CSS background-attachment

スタイルシート属性 background-attachment は画面をスクロールさせたときの背景画像の扱いを指定します。

画面をスクロールさせたときの背景画像の扱い方は、background プロパティでも指定できる。

書式

background-attachment: attachment

属性値

attachment
画面をスクロールさせたときの背景画像の扱いを指定します。
値 要素の背景画像 要素内のスクロール領域の背景画像
scroll スクロールする スクロールしない
local スクロールする スクロールする
fixed スクロールしない スクロールしない

初期値

background-attachment プロパティの初期値は scroll である。要素に background-attachment プロパティを指定しない場合は、画面をスクロールすると、背景画像も一緒にスクロールする。

適用対象

すべてのHTML要素に対して background-attachment プロパティを適用できる。

継承

親要素に background-attachment プロパティを指定しても、その子要素に background-attachment プロパティは継承されない。

使用例

背景画像のスクロール方法を指定する例を次に示す。

body {
  background-image: url(https://segakuin.com/css/img/small-background.webp);
  background-attachment: fixed;
}

JavaScript

JavaScript からはエレメントオブジェクトの style.backgroundAttachment プロパティで CSS の background-attachment プロパティを参照及び設定できる。

document.querySelector('body').style.backgroundAttachment = 'fixed'

サンプル

JavaScriptで背景の画像を切り替えるサンプルを次に示す。

<head>
  <style>
    body {
      background-image: url(https://segakuin.com/css/img/small-background.webp);
    }
  </style>
</head>
<body id="body">
  <button onclick="setBackgroundAttachment('scroll')">
    scroll
  </button>
  <button onclick="setBackgroundAttachment('local')">
    local
  </button>
  <button onclick="setBackgroundAttachment('fixed')">
    fixed
  </button>
  <script>
    function setBackgroundAttachment(v) {
      document.querySelector('body').style.backgroundAttachment = v
    }
  </script>
</body>

各ボタンをクリックすると、このページの背景画像が切り替わります。

対応状況

各Webブラウザにおける background-attachment プロパティの対応状況を次に示す。

ブラウザ毎の対応状況
ブラウザ 対応状況
Chrome ✓
Chrome Android ✓
Edge ✓
Firefox ✓
Internet Explorer ✓
Safari ✗
Safari iOS (iPhone) ✗

Safari において background-attachment: fixed と background-size を同時に指定すると、background-attachment が効かないという不具合がある。

パララックス

パララックスとは視差という意味で、遠近感や立体感があるWebデザインのことである。

スクロールさせることで背景画像が切り替わるパララックスのサンプルを次に示す。

<head>
  <style>
    .parallax_container {
      height: 200px;
      overflow-y: auto;
    }
    .parallax_content {
      background-attachment: fixed;
      height: 200px;
    }
    .spring {
      background-image: url(https://segakuin.com/css/img/spring.webp);
    }
    .summer {
      background-image: url(https://segakuin.com/css/img/summer.webp);
    }
    .autumn {
      background-image: url(https://segakuin.com/css/img/autumn.webp);
    }
    .winter {
      background-image: url(https://segakuin.com/css/img/winter.webp);
    }
  </style>
</head>
<body>
  <div class="parallax_container">
    <div class="parallax_content spring">
      SPRING
    </div>
    <div class="parallax_content summer">
      SUMMER
    </div>
    <div class="parallax_content autumn">
      AUTUMN
    </div>
    <div class="parallax_content winter">
      WINTER
    </div>
  </div>
</body>

上記のHTMLは次のように表示される。

SPRING
SUMMER
AUTUMN
WINTER

画像の中にマウスカーソルを入れると、画像をスクロールさせることができる。

関連記事

参考文献

World Wide Web Consortium (2021) CSS Backgrounds and Borders Module Level 3