【CSS】背景画像の固定について、attachment: fixedの使い方!

シュウ

公開日: 2021.08.03 / 更新日: 2026.10.08
今回は【CSS】背景画像の固定について、attachment: fixedの使い方!
の解説になります！

こんな方に読んでほしい

CSSを学び始めた方
背景画像まわりのプロパティを、基本から理解したい方です。
背景画像を固定したい方
スクロールしても背景画像が動かないデザインを実装したい方です。
パララックスの仕組みを知りたい方
今回は、パララックスの基本となるbackground-attachment: fixed;について解説しています。

背景画像の固定（スクロールしない）をする際には、background-attachment: fixed;を指定します。
※ほとんどのブラウザで対応していますが、一部のバージョンでは未対応の場合があります。

Chrome	Safari	Firefox	IE	Edge

background-attachment: fixedとは

background-attachment: fixed;とは、背景画像を画面に固定し、スクロールしないようにするプロパティです。
スクロールしても背景は動かず、コンテンツだけが流れていくように見えます。

メリット

実装が簡単：CSSのプロパティを1つ指定するだけで、背景を固定できます。
動きのあるデザインになる：スクロールに合わせてコンテンツが流れ、印象的な見た目になります。
JavaScriptが不要：CSSだけで実装でき、管理もしやすくなります。

実装時の注意ポイント

background-attachment: fixed;を指定する際には、注意点が2点あります。

注意ポイント！
1 背景画像は大きめに作成すること!
基本はブラウザ全体に背景画像を指定します。
そのため小さい画像だと、デスクトップなどの大きい画面では画像が粗くなる恐れがあります。
2 background-position、size、repeatを指定すること!
background-attachment: fixed;のみでは、きれいに固定されません。
必ず、他のbackground系のプロパティも合わせて指定しましょう。

背景画像を固定する HTML編

まずは、HTMLの構造を作成します。
背景画像を指定する要素の中に、コンテンツを入れるエリアを配置します。
完成イメージは以下のようになります。

書き方は以下のようになります。

<main>
	<div class="main-contents">
		<div class="cd-fixed-bg cd-bg-1">
			<div class="area">
				コンテンツが入ります。
			</div>
		</div>
	</div>
</main>

●①cd-fixed-bg cd-bg-1: 背景画像が固定される要素です。cd-fixed-bgが共通の設定、cd-bg-1が背景画像の指定になります。

●②area: スクロールで流れてくるコンテンツ部分です。背景画像の上に重ねて表示します。

背景画像を固定する CSS編

次に、CSSで背景画像を固定する設定を行います。
書き方は以下のようになります。

/*--画面全体の設定--*/
body,
html {
  height: 100%;
  margin: 0 auto;
}

/*--固定背景の設定--*/
.cd-fixed-bg {
  position: relative;
  min-height: 100%;
  height: 400px; /*--スクロールさせるため高さを指定--*/
  background-size: cover; /*--背景画像のサイズ--*/
  background-attachment: fixed; /*--背景画像の固定--*/
  background-repeat: no-repeat; /*--背景画像の繰り返し--*/
  background-position: center center; /*--背景画像の位置--*/
  z-index: 2;
  padding: 5em 0;
}

/*--背景画像の指定--*/
.cd-fixed-bg.cd-bg-1 {
  background-image: url('画像パス');
}

/*--コンテンツの設定--*/
.area {
  width: 80%;
  margin: 0 auto;
  padding: 10em 0;
  text-align: center;
  background-color: #ffffff;
  overflow: hidden;
}

●①background-attachment: fixed;: 背景画像を画面に固定し、スクロールしても動かないようにします。今回の中心となる指定です。

●②background-size: cover;: 背景画像が、要素全体を隙間なく覆うように拡大・縮小して表示します。

●③background-repeat: no-repeat;: 背景画像が繰り返し表示されないようにします。

●④background-position: center center;: 背景画像の表示位置を、中央に指定します。

●⑤background-image: 表示する背景画像のパスを指定します。画像パスの部分は、ご自身の画像に変更してください。

●⑥.area: コンテンツ部分のデザインです。背景を白にして、背景画像の上に重ねて表示します。装飾は自由に変更できます。

今回は、デモでスクロールしてもらうために、height: 400px;を指定しています。
実際のサイトでは、コンテンツの量に合わせて調整してください。

パララックスに応用する

background-attachment: fixed;を使うと、パララックスというレイアウトも可能になります。
パララックスとは、日本語で「視差」という意味です。
背景画像が固定されたまま、スクロールに合わせてコンテンツが流れる動きを表現できます。
詳しい実装方法は、以下の関連記事で解説しています。

1カラム「パララックス」

スクロール時に背景画像が切り替わるパララックス

スクロール時に背景画像が切り替わるパララックスの実装方法を解説します。

2カラムデザイン固定と可変をcalc関数で指定する!

calc関数を使って、固定幅と可変幅を組み合わせた2カラムデザインを作成します。

今回は、2カラムと1カラムの「パララックス」のデモを用意しました。ぜひ確認してみてください。
また、「iPhone（iOS）だとスクロールがうまくいかない現象について」も、1カラムの記事で解説しています。

まとめ

今回はこれで以上です。
今回は、CSSのbackground-attachment: fixed;を使って、背景画像を固定する方法を紹介しました。
HTMLで背景とコンテンツの構造を作成し、CSSで固定や表示サイズなどを指定することで、簡単にパララックスの基本を再現できます。
ただし、一部のブラウザやiPhone（iOS）では正しく動作しない場合があるため、公開前に実機で確認しておきましょう。

POINT