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

CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。

このプロパティには、主に以下の3つの値を指定できます。

  • scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。
  • fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。
  • local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。

構文

CSSのbackground-attachmentプロパティの基本構文は以下の通りです。

セレクタ {
    background-attachment: /*値*/;
}

使用例1：local を指定した場合

以下の例では、body要素の背景画像にbackground-attachment: local;を指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: center;
    background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-mini-logo.jpg");
}
div {
    padding: 40px;
    margin: 30px;
}
.in {
    background: rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div id="one">
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
</div>
</body>
</html>

出力結果

このコードを実行すると、次のような画面が表示されます。

CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

ページをスクロールすると、背景画像も一緒にスクロールして動くことが確認できます。

CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

使用例2：fixed を指定した場合

次に、background-attachment: fixed;を指定した例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 10% 5%;
    background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-mini-logo.jpg");
}
div {
    padding: 80px;
    margin: 30px;
    border-radius: 4%;
}
.in {
    background: rgba(0,40,0,0.4);
}
</style>
</head>
<body>
<div id="one">
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
</div>
</body>
</html>

出力結果

このコードを実行すると、次のような画面が表示されます。

CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

ページをスクロールしても、背景画像はビューポートに対して固定されたまま動きません。これがfixedの特徴です。

CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

まとめ

background-attachmentプロパティを使いこなすことで、スクロール時の背景画像の挙動を自由にコントロールできます。特にfixedは、視差効果（パララックス）のような演出にも応用できる便利な値なので、ぜひ実際のWeb制作でも活用してみてください。

  1. 【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

    Flexbox（フレックスボックス）とは？ CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。 Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ