CSSで背景画像のスクロールを制御するには？background-attachmentプロパティの使い方
背景画像のスクロールを制御するbackground-attachmentプロパティ
背景画像のスクロール動作を設定するには、CSSのbackground-attachmentプロパティを使用します。このプロパティを活用することで、ページをスクロールした際に背景画像を固定表示するか、コンテンツと一緒にスクロールさせるかを自由に制御できます。
主な値の種類
- scroll：背景画像がページのスクロールに合わせて移動します（初期値）。
- fixed：背景画像がビューポートに対して固定され、ページをスクロールしても位置が変わりません。
- local：要素内のコンテンツのスクロールに合わせて、背景画像も一緒にスクロールします。
サンプルコード
以下のコードを実行して、background-attachmentプロパティの実際の動作を確認してみましょう。
<!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>コードの解説
上記の例では、background-attachment: fixed;を指定しているため、ページをスクロールしても背景画像は画面上の同じ位置に固定されたまま表示されます。
一方、値をscrollに変更すると、背景画像がテキストコンテンツと一緒にスクロールしていくのが確認できます。パララックス効果のような視覚的な演出を作りたい場合には「fixed」を、通常のスクロール挙動にしたい場合には「scroll」を使うとよいでしょう。
-
CSSのbackgroundショートハンド（一括指定）プロパティの使い方を解説
CSSのbackgroundショートハンド（一括指定）プロパティは、要素の背景をまとめて定義するための便利なプロパティです。1つの宣言で複数の背景関連プロパティを同時に設定できるため、コードが簡潔になり、可読性も向上します。backgroundショートハンドに含まれる個別プロパティbackgroundショートハンドを使うことで、以下の8つの個別プロパティを一度に指定できます。background-color：背景色background-image：背景画像background-repeat：画像の繰り返し方法background-position：画像の表示位置background-clip：
-
CSSのbackground-imageプロパティで背景画像を設定する方法
CSSのbackground-imageプロパティは、選択した要素の背景に画像を設定するために使用されます。単一の画像だけでなく、複数の画像をカンマで区切って指定することも可能で、グラデーションを背景として利用することもできます。基本構文CSSのbackground-imageプロパティの構文は以下の通りです。セレクタ { background-image: /*値*/ }値には、url()関数で画像のパスを指定するか、linear-gradient()などのグラデーション関数を指定します。以下の例では、CSSのbackground-imageプロパティの使い方を紹介します。例1: 要