CSS プロパティ background-attachment

CSS プロパティ background-attachment：背景画像のスクロール方法を制御する

説明: background-attachment プロパティは、背景画像を固定するか、ページコンテンツと共にスクロールさせるかを設定します。

1. `background-attachment` プロパティ値の詳細

scroll: (初期値) 背景画像はページのスクロールと共に移動します。


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
      background-image: url("https://picsum.photos/1200/800"); /* 例: 背景画像 */
      background-repeat: no-repeat;
      background-attachment: scroll;
    }
    </style>
    </head>
    <body>
    <p>長いコンテンツ...</p> 
    </body>
    </html>

fixed: 背景画像はビューポートの特定の位置に固定され、ページのスクロールに関係なく動きません。


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
      background-image: url("https://picsum.photos/1200/800"); /* 例: 背景画像 */
      background-repeat: no-repeat;
      background-attachment: fixed;
    }
    </style>
    </head>
    <body>
    <p>長いコンテンツ...</p> 
    </body>
    </html>

local: 背景画像は、それが含まれるブロック要素と共にスクロールします。


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .container {
      height: 300px;
      overflow-y: auto;
      background-image: url("https://picsum.photos/1200/800"); /* 例: 背景画像 */
      background-repeat: no-repeat;
      background-attachment: local;
    }
    </style>
    </head>
    <body>
    <div class="container">
      <p>長いコンテンツ...</p> 
    </div>
    </body>
    </html>

包含ブロックとは、要素の配置やサイズを決定する親要素のことです。詳細はこちらをご覧ください。

2. `background-attachment` の適用例

視差スクロール効果の作成: background-attachment: fixed を使用すると、背景画像と前景コンテンツのスクロール速度が異なる視差効果を簡単に作成できます。


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
      background-image: url("https://picsum.photos/1200/800"); /* 例: 背景画像 */
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }

    .content {
      padding: 200px;
      background-color: rgba(255, 255, 255, 0.8);
    }
    </style>
    </head>
    <body>
    <div class="content">
      <h1>視差スクロール</h1>
      <p>コンテンツ...</p>
    </div>
    </body>
    </html>

背景画像の固定: background-attachment: fixed は、ウェブサイトの背景画像を固定するために使用できます。これにより、ページをスクロールしても背景画像が消えることはなく、没入感のあるウェブ体験を作成するためによく使用されます。


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
      background-image: url("https://picsum.photos/1200/800"); /* 例: 背景画像 */
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }
    </style>
    </head>
    <body>
    <p>長いコンテンツ...</p> 
    </body>
    </html>

部分的なスクロール効果: background-attachment: local を使用すると、背景画像を特定の領域内でのみスクロールさせることができます。これは、ページ内に複数のスクロール領域を作成する必要がある場合に役立ちます。


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .container {
      height: 300px;
      overflow-y: auto;
      background-image: url("https://picsum.photos/1200/800"); /* 例: 背景画像 */
      background-repeat: no-repeat;
      background-attachment: local;
    }
    </style>
    </head>
    <body>
    <div class="container">
      <p>長いコンテンツ...</p> 
    </div>
    <div class="container">
      <p>別の長いコンテンツ...</p> 
    </div>
    </body>
    </html>

3. ブラウザの互換性

background-attachment プロパティは、優れたブラウザの互換性を備えており、ほぼすべての主要なブラウザでサポートされています。

ブラウザ	バージョン	サポート
Chrome	4+	✅
Firefox	3.6+	✅
Safari	5+	✅
Edge	12+	✅
Opera	11.5+	✅
Internet Explorer	9+	✅

出典: Can I use... Support tables for HTML5, CSS3, etc

4. まとめ

background-attachment プロパティは、背景画像のスクロール方法を制御するための強力なツールです。視差スクロール、背景の固定、部分的なスクロールなど、さまざまな面白くて実用的なウェブページ効果を作成するのに役立ちます。

よくある質問

Q: background-attachment: fixed を使用すると、モバイルデバイスで問題が発生しますか？
A: はい、モバイルデバイスでは、background-attachment: fixed の動作が異なる場合があります。特に、スクロールのパフォーマンスに影響を与える可能性があります。モバイルデバイスでは、代わりに、JavaScriptまたはCSSの他のテクニックを使用して視差スクロール効果を実現することを検討してください。
Q: background-attachment を複数の背景画像に使用できますか？
A: いいえ、background-attachment プロパティは、要素に適用されるすべての背景画像に適用されます。複数の背景画像に対して異なるスクロール動作を設定する場合は、各背景画像を別々の要素に配置し、それぞれの要素に異なる background-attachment 値を適用する必要があります。
Q: background-attachment を使用して、背景画像を水平方向にスクロールさせることはできますか？
A: いいえ、background-attachment プロパティは、垂直方向のスクロール動作のみに影響します。背景画像を水平方向にスクロールさせるには、JavaScriptまたはCSSアニメーションなどの別のテクニックを使用する必要があります。