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

JavaScriptのDOMで背景画像を固定表示する方法（backgroundAttachmentプロパティの使い方）

JavaScriptで背景画像をスクロールしても動かないように固定表示したい場合は、backgroundAttachmentプロパティを使用します。このプロパティに「fixed」を設定することで、ページをスクロールしても背景画像が画面上の同じ位置に留まるようになります。

backgroundAttachmentプロパティとは

backgroundAttachmentは、CSSのbackground-attachmentに相当するDOMスタイルプロパティです。主な設定値は以下のとおりです。

  • scroll（初期値）： ページのスクロールに合わせて背景画像も一緒にスクロールします。
  • fixed： 背景画像がビューポートに対して固定され、コンテンツをスクロールしても画像は動きません。
  • local： 要素自体のスクロールに合わせて背景画像がスクロールします。

サンプルコード

以下のコードでは、ボタンをクリックするとbody要素に背景画像が設定され、backgroundAttachmentプロパティによって「fixed（固定）」状態になります。実際に実行して、スクロールしても背景画像が動かないことを確認してみてください。

<!DOCTYPE html>
<html>
   <body>
      <button onclick="display()">クリックして背景を設定</button>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <p>デモテキスト</p>
      <script>
         function display() {
            // 背景画像を右上に配置（繰り返しなし）
            document.body.style.background = "url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg') no-repeat right top";
            // 背景画像を固定する
            document.body.style.backgroundAttachment = "fixed";
         }
      </script>
   </body>
</html>

コードの解説

このサンプルでは、まずstyle.backgroundプロパティを使って背景画像のURL、繰り返しの有無（no-repeat）、表示位置（right top：右上）を一括で指定しています。その後、style.backgroundAttachmentに「fixed」を代入することで、背景画像がビューポートに固定されます。

ボタンをクリックした後にページをスクロールすると、テキストだけが動いて背景画像は元の位置に留まり続けることが確認できます。なお、モバイルブラウザの中には「fixed」の挙動が正しく反映されない場合があるため、レスポンシブ対応を行う際は注意が必要です。

  1. 【CSS入門】ウェブページに背景画像を設定する方法

    ウェブページに背景画像を設定するには、CSSを使用します。<style>タグ内でbackground-imageプロパティを指定することで、JPG・PNG・SVG・GIFなどの画像ファイルをページの背景として表示できます。なお、HTML5では<body>要素のbackground属性がサポートされていないため、背景画像の設定にはCSSを使うのが標準的かつ推奨される方法です。記述例以下のコードを参考にすると、HTMLページの背景画像を簡単に設定できます。実際にエディタに貼り付けて動作を確認してみてください。<!DOCTYPE html> <html>

  2. CSSで背景画像を固定表示する方法｜background-attachmentの使い方

    CSSでは、background-attachment プロパティを使用することで、背景画像をスクロールに連動させずに固定表示できます。値に fixed を指定すると、ページをスクロールしても背景画像が画面上の同じ位置に留まり続けます。background-attachment の主な値scroll（初期値）： ページと一緒に背景画像がスクロールしますfixed： 背景画像がビューポートに対して固定され、スクロールしても動きませんlocal： 要素のコンテンツと一緒に背景画像がスクロールしますサンプルコード以下のコードを実行すると、background-attachment プロパティを使って