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

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

CSSでは、background-attachment プロパティを使用することで、背景画像をスクロールに連動させずに固定表示できます。値に fixed を指定すると、ページをスクロールしても背景画像が画面上の同じ位置に留まり続けます。

background-attachment の主な値

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

サンプルコード

以下のコードを実行すると、background-attachment プロパティを使って背景画像を固定表示する様子を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: right top;
         }
      </style>
   </head>
   <body>
      <h1>Background Image</h1>
   </body>
</html>

コードのポイント

この例では、body 要素に対して以下の設定を行っています。

  • background-image: 表示する背景画像のURLを指定します
  • background-repeat: no-repeat: 背景画像の繰り返し表示を無効にします
  • background-attachment: fixed: 背景画像を固定位置に配置します
  • background-position: right top: 背景画像を右上に配置します

このように background-attachment を活用すると、スクロールしても背景が固定される視覚効果のあるデザインを簡単に実装できます。

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

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

  2. CSSで背景画像をぼかす方法｜filter: blur()の使い方を解説

    Webサイトのヒーローセクションなどで、背景画像をぼかして奥行きのあるおしゃれなデザインにしたい場面は多くあります。CSSではfilterプロパティのblur()関数を使うだけで、誰でも簡単にぼかし効果を実現できます。この記事では、実際のコード例とともにその実装方法を詳しく解説します。 実装のポイント：背景画像専用の要素を分ける blur()は指定した要素だけでなく、その中にある子要素（テキストなど）にも適用されてしまいます。そのため、背景画像だけをぼかしたい場合は、背景画像専用の要素を別途用意し、テキストなどのコンテンツとは分離して配置するのが重要なポイントです。 コード例 <!DOC