先生と生徒の会話形式で理解しよう

生徒

「Webページをスクロールしても、背景画像をそのまま固定して表示し続けたいんですが、どうしたらいいですか？」

先生

「それにはCSSのbackground-attachmentプロパティを使います。特にfixedという値を指定すると、スクロールしても背景が固定されて見えるようになりますよ。」

生徒

「それってどういうことですか？イメージが湧かないんですが…」

先生

「それでは実際にコードを見ながら、スクロールに追従しない固定背景の設定方法を一緒に学んでいきましょう！」

1. 背景を固定するとはどういう意味？

背景画像が「固定」されるとは、ページを下にスクロールしても背景が動かず、その場にとどまり続ける状態のことをいいます。

背景画像がページに貼り付いたように動かないので、「パララックス効果（視差効果）」のような演出もできます。

これを実現するのが、CSSプロパティのbackground-attachment: fixedです。

2. CSSで背景画像を固定する方法

まずは基本的なHTMLとCSSの例を見てみましょう。


<style>
body {
    background-image: url('https://placehold.jp/3d4070/ffffff/1200x800.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    height: 2000px;
    margin: 0;
    font-family: sans-serif;
}
.container {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 30px;
    max-width: 800px;
    margin: 100px auto;
    border-radius: 10px;
}
</style>

<div class="container">
    <h2>固定背景のサンプル</h2>
    <p>このエリアはスクロールしても背景は動きません。</p>
</div>

ブラウザ表示

3. background-attachmentの役割を理解しよう

background-attachmentには3つの主な指定方法があります：

scroll：スクロールと一緒に背景が動きます（初期設定）。
fixed：背景が固定され、スクロールしても動きません。
local：要素内のスクロールに合わせて背景が動きます。

今回はこの中でも最もよく使われるfixedを取り上げました。

4. 背景を全画面で表示して固定するには？

背景画像を画面全体に表示したいときは、background-size: cover;を組み合わせます。

これにより、背景画像がウィンドウの大きさにフィットするように調整されます。

5. スマホでbackground-attachment: fixedが効かない？

スマートフォンや一部のタブレットでは、background-attachment: fixedが効かないことがあります。

これはブラウザの制限によるもので、モバイルでは固定背景がうまく動作しないことがあります。

その場合はJavaScriptでスクロールに合わせて背景位置を調整するなどの対応が必要ですが、初心者のうちは無理に使わず、PC向けデザインに限定するのが無難です。

6. よくある失敗と注意点

背景が小さい画像だと繰り返し（リピート）されて見栄えが悪くなる → background-repeat: no-repeat;を使う
画面に背景画像が収まらない → background-size: cover;を使って全体にフィットさせる
スマホで動かない → モバイル対応は割り切るか、別の方法を検討

7. 背景固定はどんな場面で使う？

背景固定のテクニックは、次のような場面でよく使われます：

かっこいい印象を与えたいランディングページ
写真やイラストを背景にして印象的なデザインにしたいとき
Webデザインの演出として背景と前面のテキストの動きを分けたいとき

CSSだけで簡単に実現できるので、初心者にもぜひ使ってほしいテクニックです。

まとめ

background-attachment: fixedで実現できる背景固定表現を振り返る

この記事では、CSSの background-attachment: fixed を使って、スクロールしても背景画像が動かない「背景固定」の仕組みについて、初心者の方にも分かりやすく解説してきました。 Webページを上下にスクロールしたとき、背景だけがその場に留まり、文字やコンテンツだけが前面で動く演出は、視覚的なインパクトが強く、印象に残りやすいデザインとしてよく利用されます。このような表現は、CSSの中でも比較的シンプルな記述で実現できるため、HTMLとCSSを学び始めた段階でも取り入れやすいテクニックです。

背景固定の基本となるのが background-attachment プロパティです。このプロパティは、背景画像がスクロールに対してどのように振る舞うかを指定する役割を持っています。初期値である scroll は、ページのスクロールに合わせて背景も一緒に動きますが、fixed を指定することで、背景だけを画面に固定した状態にできます。この違いを理解することが、背景固定を正しく使いこなす第一歩になります。

background-sizeやpositionとの組み合わせが重要

background-attachment: fixed を使う際に欠かせないのが、他の背景関連プロパティとの組み合わせです。特に background-size: cover; は、背景画像を画面いっぱいに広げ、縦横比を保ちながら表示してくれるため、固定背景との相性が非常に良い指定です。また background-position: center; を使うことで、背景画像の中心を基準に配置でき、どの画面サイズでも安定した見た目を保ちやすくなります。

これらの指定を適切に組み合わせることで、背景画像が途中で切れてしまったり、意図しない位置に表示されたりする問題を防ぐことができます。単に fixed を指定するだけでなく、全体のバランスを考えながらCSSを書くことが、実務レベルのWebデザインでは重要になります。

背景固定の基本サンプルをおさらい

ここで、記事内で学んだ内容を踏まえた、背景固定の基本的なサンプルコードを改めて確認してみましょう。 body全体に背景画像を設定し、スクロールしても背景が固定される構成です。


<style>
body {
    background-image: url('https://placehold.jp/5f9ea0/ffffff/1200x800.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    margin: 0;
    font-family: sans-serif;
}
.content {
    background-color: rgba(255, 255, 255, 0.85);
    max-width: 800px;
    margin: 100px auto;
    padding: 30px;
    border-radius: 8px;
}
</style>

<div class="content">
    <h2>背景固定の確認</h2>
    <p>
        このテキスト部分をスクロールしても、背景画像は画面に固定されたまま表示されます。
        background-attachment: fixed を使った基本的な例です。
    </p>
</div>

ブラウザ表示

このように、CSSだけで背景固定の表現を作ることができます。ただし、スマートフォンや一部のブラウザでは background-attachment: fixed が正しく動作しない場合があるため、使用する場面を選ぶことも大切です。主にパソコン向けのWebサイトや、デザイン重視のページで活用すると効果的です。

先生と生徒の振り返り会話

生徒

「background-attachment: fixed を使うと、スクロールしても背景が動かない理由がよく分かりました。思っていたよりシンプルなCSSで実現できるんですね。」

先生

「そうですね。CSSの背景関連プロパティは、組み合わせ次第で見た目が大きく変わります。 fixed はその中でも、デザイン性を高めやすい指定の一つです。」

生徒

「background-size: cover や background-position も一緒に使う理由が理解できました。ただ固定するだけじゃなく、見た目の調整も大切なんですね。」

先生

「その通りです。背景が主役になるデザインでは、細かい指定が仕上がりを左右します。まずは基本を押さえて、少しずつ応用していきましょう。」

生徒

「スマホでは動かない場合がある点も覚えておきます。使う場面を考えながらデザインしてみます。」

先生