CSS辞典 background-attachmentプロパティの解説

スクロール時の背景画像の表示方法を指定する「background-attachmentプロパティ」の使用方法を記載

対応バージョン：CSS3／2.1

対応ブラウザ
概要・使用方法
- 指定できる位置
- サンプルコード

対応ブラウザ

初期値	scroll
適用される要素	すべての要素
モジュール	CSS Backgrounds and Borders Module Level3及びLevel4
継承	あり

概要・使用方法

{ background-attachment: 表示方法;}

「background-attachmentプロパティ」は、ページをスクロールしたときの背景画像の表示方法を指定します。

指定できる位置

scroll	背景画像も一緒にスクロールします。
fixed	背景画像は固定されてスクロールしません。
local	背景画像は指定された要素の領域に固定されます。その領域にスクロール機能がある場合は、内容と一緒に背景画像もスクロールします。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>background-attachmentプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .sample1{
                    color:#ffffff;
                    background-image:url("https://kcfran.com/sample/4006205_ss.jpg");
                    background-attachment:fixed;
           }     
    </style>
  </head>
  <body class="sample1">
      <h1>お魚の生態</h1>
      <p>ここでは、アイナメ、エソ、コチ、マグロ、サンマの生態について掲載してします。</p>
      <h2 id="fish_ainame">アイナメ生態</h2>
      <p>鮎に形が似ていることから、「鮎魚女」とした。北海道から九州南部まで生息している。旬の時期は夏から秋にかけてである。</p>
      <h2 id="fish_eso">エソ生態</h2>
      <p>エソはマエソなどがあります。水深100メートルより浅い砂地に生息。千葉県から瀬戸内海にかけて生息しています。旬は秋から春にかけて</p>
      <h2 id="fish_kochi">コチ生態</h2>
      <p>イネゴチ、エンマゴチなどの種類がいます。青森県から九州まで生息しています。旬は春から夏にかけて。特に卵巣がおいしい魚です。</p>
      <h2 id="fish_maguro">マグロ生態</h2>
      <p>マグロは、キハダマグロ、クロマグロ、ミナミマグロ、コシナガマグロなどいます。キハダマグロは、日本近海、日本海には希。世界中の温・熱帯域に生息しています。旬は夏</p>
      <h2 id="fish_sanma">サンマ生態</h2>
      <p>サンマは、オホーツク海、北海道〜九州南岸の日本海・東シナ海沿岸、北海道〜九州南岸の大平洋沿岸、瀬戸内海、屋久島。
朝鮮半島東岸、ピーター大帝湾、北米西岸バハカリフォルニアまでの北太平洋に生息しています。寿命は2年～2.5年程度。初夏から秋にかけてが旬</p>
  </body>
</html>

「fixed」を指定しているため文字だけがスクロールし、BODY部の画像は固定になります。

chromeブラウザ実行結果