JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSのbackground-attachmentプロパティで背景画像の固定・スクロールを設定する方法

CSSで背景画像の表示方法を制御するには、background-attachment プロパティを使用します。このプロパティにより、背景画像をページと一緒にスクロールさせるか、画面上に固定したまま表示するかを指定できます。

background-attachment の主な値

  • scroll：初期値です。ページをスクロールすると、背景画像も一緒にスクロールします。
  • fixed：背景画像がビューポートに対して固定され、ページをスクロールしても位置が変わりません。
  • local：要素内のコンテンツのスクロールに合わせて、背景画像もスクロールします。

サンプルコード

以下のコードは、background-attachment: fixed; を使って背景画像を固定表示する例です。実際にブラウザで開いて、ページを下にスクロールしながら挙動を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>
   <body>
      <p>背景画像は固定されています。ページを下にスクロールして確認してみましょう。</p>
      <p>背景画像は固定されています。ページを下にスクロールして確認してみましょう。</p>
      <p>背景画像は固定されています。ページを下にスクロールして確認してみましょう。</p>
      <p>背景画像は固定されています。ページを下にスクロールして確認してみましょう。</p>
      <p>背景画像は固定されています。ページを下にスクロールして確認してみましょう。</p>
      <p>背景画像は固定されています。ページを下にスクロールして確認してみましょう。</p>
      <p>背景画像は固定されています。ページを下にスクロールして確認してみましょう。</p>
      <p>背景画像は固定されています。ページを下にスクロールして確認してみましょう。</p>
      <p>背景画像は固定されています。ページを下にスクロールして確認してみましょう。</p>
   </body>
</html>

コードの解説

このサンプルでは、body 要素に対して次の3つのプロパティを指定しています。

  • background-image：表示したい背景画像のURLを指定します。
  • background-repeat: no-repeat;：背景画像の繰り返し表示を無効にし、画像を1つだけ表示します。
  • background-attachment: fixed;：背景画像をビューポートに固定し、スクロールしても位置が変わらないようにします。

この状態でページをスクロールすると、テキストだけが上下に移動し、背景画像は常に同じ位置に表示され続けます。ヒーローセクションや装飾的な演出など、視覚的なインパクトを与えたい場面で活用できる便利なテクニックです。

  1. CSSのlinear-gradient()関数で背景に線形グラデーションを設定する方法

    CSSでは、linear-gradient()関数を使うことで、背景画像として線形グラデーションを簡単に設定できます。この関数はbackgroundプロパティやbackground-imageプロパティの値として指定し、複数の色をカンマで区切って渡すことで、それらが滑らかにつながったグラデーションが生成されます。 linear-gradient()関数の基本構文 background: linear-gradient(色1, 色2, 色3, ...); 色は2つ以上指定でき、上から下へ順番に表示されます。グラデーションの方向（角度）を指定することも可能です。例えばlinear-gradient

  2. CSSで背景に放射状グラデーション（radial-gradient）を設定する方法

    CSSのradial-gradient()関数を使用すると、中心点から外側に向かって色が変化する放射状グラデーションを、背景画像として簡単に設定できます。複数の色を指定するだけで、滑らかなグラデーションが自動的に生成されるため、ボタンやバナー、セクション背景などのデザインに幅広く活用できます。radial-gradient()の基本構文background: radial-gradient(色1, 色2, 色3, ...);色はカンマ区切りで複数指定でき、左側に記述した色が中心になり、右側の色が外周へと変化していきます。実装例次のコードでは、緑（green）・オレンジ（orange）・栗色（m