背景の写真をCSSで固定する｜background-attachment: fixedとiPhoneでも動くsticky

ページをスクロールしても、背景の写真だけはその場に止まっていて、文章が上を流れていく。トップページやランディングページ（広告から来た人が最初に見るページ）でよく見かける見せ方です。CSSの background-attachment: fixed を1行足すと作れます。

使いどころは、文章の区切りに1〜2か所だけ写真を見せたいときです。ページのあちこちに入れると、どこを読んでいるのか分かりにくくなります。また、iPhoneのSafariでは効かないので、スマホではふつうの背景になる前提で作ります。

この記事の要点

background-attachment: fixed で、背景の写真を画面に固定し、文章だけをスクロールさせられる
使いどころは、トップページやLPの区切りに1〜2か所。ページの一番上の写真なら、iPhoneでも動く position: sticky の形も使える
iPhoneのSafariでは効かない。スマホと「動きを減らす」設定ではふつうの背景にしておき、写真の上の文字は暗い膜で読みやすくする

連載「WEBの技術」の58回目です。
今回は、写真を背景に固定する見せ方です。1行で作れますが、効かない端末と、動きが苦手な人のことまで考えて使います。

完成見本：背景の写真を固定する4種類

どの見本も、小さな画面の中を自動で上下にスクロールさせています。1は、左がふつうの背景、右が固定した背景です。右は、文章が動いても写真が止まったままで、写真の段が窓のように見えます。

FIXED1. 写真を固定して、文章だけ流すトップページやLPの区切りに

OVERLAY2. 暗い膜を重ねて、文字を読みやすく写真の上に見出しを置くときに

STICKY3. iPhoneでも動く形（sticky）ページの一番上の写真に

SAFE4. スマホと動きを減らす設定では、ふつうの背景にどのサイトでも、この形を基本に

※ background-attachment: fixed は本来ブラウザの画面全体に写真を固定します。見本では、その見え方を小さな画面の中で再現しています。見本は読み上げソフトでは読まれないようにしています。動きを減らす設定にしている方には、止まって見えます。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。photo-sea.jpg などの写真の名前は、使う写真のURLに置きかえてください。クラス名の頭の kd-bf は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

1. 写真を固定して、文章だけ流す

background-attachment: fixed を書くと、背景の写真が画面に貼りついたまま動かなくなります。ページをスクロールすると、文章だけが流れていき、写真の段が「窓」のように見えます。左がふつうの背景、右が固定した背景です。

HTML

<section class="kd-bf-photo">
  <p class="kd-bf-copy">海のそばで、家をつくる</p>
</section>

CSS

/* 写真を画面に固定する */
.kd-bf-photo {
  min-height: 60vh;
  display: grid;
  place-items: center;
  background-image: url("photo-sea.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* ここで固定 */
}
.kd-bf-copy {
  margin: 0;
  padding: 10px 20px;
  background: #fff;
  color: #10283A;
  font-weight: 700;
}

2. 暗い膜を重ねて、文字を読みやすく

写真の上に、半分すけた紺色を重ねて文字を読みやすくします。background に2枚の背景を重ね、background-attachment: fixed を1つだけ書くと、膜と写真の両方が固定されます。

HTML

<section class="kd-bf-dark">
  <p class="kd-bf-big">山のふもとの、小さな工房</p>
</section>

CSS

/* 暗い膜と写真を重ねて、どちらも固定する */
.kd-bf-dark {
  min-height: 60vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(rgb(16 40 58 / .55), rgb(16 40 58 / .55)),
    url("photo-mountain.jpg") center / cover;
  background-attachment: fixed;  /* 1つ書けば2枚とも固定 */
  color: #fff;
}
.kd-bf-big {
  margin: 0;
  font-size: clamp(22px, 5vw, 40px);
  font-weight: 700;
  text-align: center;
}

3. iPhoneでも動く形（sticky）

iPhoneのSafariでは background-attachment: fixed が効きません。ページの一番上の写真なら、position: sticky で写真の箱ごと上に止め、次の内容をその上に重ねると、iPhoneでも同じ見え方にできます。

HTML

<div class="kd-bf-hero">
  <div class="kd-bf-hero-img">
    <p class="kd-bf-copy">海のそばで、家をつくる</p>
  </div>
  <div class="kd-bf-next">
    <p>ここから下が、次の内容です。</p>
  </div>
</div>

CSS

/* 一番上の写真に、次の内容を重ねる（iPhoneでも動く） */
.kd-bf-hero-img {
  position: sticky;
  top: 0;
  height: 100vh;  /* 画面の高さいっぱい */
  display: grid;
  place-items: center;
  background: url("photo-sea.jpg") center / cover;
}
.kd-bf-next {
  position: relative;  /* 写真より手前に出す */
  padding: 40px 20px;
  background: #fff;
}

4. スマホと動きを減らす設定では、ふつうの背景に

まずはふつうの背景にしておき、画面が広く、動きを減らす設定がオフのときだけ固定します。左がスマホの幅や動きを減らす設定のとき、右がパソコンの幅のときです。

HTML

<section class="kd-bf-safe">
  <p class="kd-bf-copy">海のそばで、家をつくる</p>
</section>

CSS

/* まずは、ふつうの背景にしておく */
.kd-bf-safe {
  min-height: 60vh;
  display: grid;
  place-items: center;
  background: url("photo-sea.jpg") center / cover;
}

/* 画面が広く、動きを減らす設定がオフのときだけ固定 */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .kd-bf-safe {
    background-attachment: fixed;
  }
}

サイトで使うときは、1〜3を書いたうえで、4のように @media で固定する場面をしぼる形をおすすめします。

仕組み：背景が「何に」くっついているか

3つの値：scroll・fixed・local

background-attachment は、背景の写真を何にくっつけるかを決める指定です。MDNによると、値は3つあります。

scroll（初期値）：背景は要素にくっつきます。ページをスクロールすると、要素といっしょに写真も動きます。ふだんの背景はこれです
fixed：背景は画面（ビューポート＝ブラウザの表示される範囲）にくっつきます。ページをスクロールしても、写真は画面の同じ位置に止まります
local：背景は要素の中身にくっつきます。中だけスクロールする箱で、中身といっしょに背景も動きます

写真の位置と大きさは「画面」が基準になる

W3Cの仕様では、fixed にした背景は、位置と大きさの基準が要素ではなく画面全体になります。background-size: cover（すき間なく覆う）も、画面全体を覆う大きさで計算されます。写真の段が画面より小さいと、その段から見えるのは写真の一部だけです。

写真の中で見せたいものが真ん中にない写真は、段から外れて見えないことがあります。固定する写真は、真ん中に主役があり、どこを切り取っても絵になるものを選びます。

2枚重ねでも、1つ書けば両方固定

2の見本は、background に「半分すけた紺色」と「写真」の2枚を重ねています。MDNによると、重ねた背景の枚数より値が少ないときは、値がくり返して当てはめられます。background-attachment: fixed を1つ書けば、膜と写真の両方が固定されます。

sticky は「箱ごと止める」

3の見本は、背景の指定ではなく、写真を入れた箱そのものを position: sticky で画面の一番上に止めています。次の内容に position: relative と白い背景を付けると、HTMLで後ろに書いた要素が手前に重なるので、止まった写真の上を次の内容が流れていきます。ページの一番上の写真なら、fixed と同じ見え方になります。

数値を変えるとどうなるか

膜の濃さ

2の見本の膜の濃さを変えました。

膜なしでは、白い文字が空や雪の白い部分と重なって読みにくくなります。80%では文字はくっきりしますが、写真の色がほとんど分からなくなります。KAKERUでは、40〜60%を目安に、写真のいちばん明るいところに文字を重ねて確かめています。

段の高さ

1の見本の min-height: 60vh は、「画面の高さの60%」という意味です。段が低いと、写真がちらっと見えるだけで、固定していることが伝わりません。逆に画面の高さいっぱいにすると、文章を読みたい人が写真の上を長くスクロールすることになります。KAKERUでは、50〜70vh くらいにしています。

スマホと、見る人への配慮

iPhoneのSafariでは効かない

MDNの対応表では、iPhoneのSafariは background-attachment: fixed を「認識はするが効果がない」とされています。iPhoneで見ると、写真はふつうの背景のように文章といっしょに動きます。文字が読めなくなるわけではないので、「iPhoneでは固定されない」と分かったうえで使えば問題はありません。iPhoneでも同じ見え方にしたいときは、3の sticky の形を使います。

スマホの縦長の画面では、写真が大きく切り取られる

固定した背景は画面全体を覆う大きさになります。スマホの縦長の画面だと、横長の写真は左右が大きく切れて、段から見えるのは写真のごく一部です。4の見本は、画面の幅が768px以上のときだけ固定して、スマホではふつうの背景にしています。

動きを減らす設定の人には固定しない

W3Cは、背景と手前が違う速さで動く見せ方（パララックス）を、めまいや吐き気の原因になりうる動きの例に挙げています。fixed も、背景が止まり手前だけが動くので、KAKERUでは同じ仲間として扱います。4の見本では prefers-reduced-motion: no-preference（動きを減らす設定がオフ）のときだけ固定しています。

写真の上の文字は、色の差を確かめる

写真の上に文字を置くときは、写真のいちばん明るいところでも文字が読めるかを見ます。2の見本のように暗い膜を重ねるか、1の見本のように文字の後ろに白い帯を敷きます。写真が読み込めなかったときのために、膜の色や background-color を書いておくと、白い文字が白い背景に消えることを防げます。

やりすぎ注意

固定した写真の段を何か所も続けると、スクロールのたびに写真が切りかわり、文章の流れが途切れます。画面いっぱいに見せる写真は大きなファイルになりがちなので、ページの表示が遅くならないよう、写真は横1,600px前後に縮めておきます。固定する段は、1ページに1〜2か所までにします。

AIに頼むなら

Claudeなどの生成AIに頼むときは、「パララックスにして」だけでなく、効かない端末と動きを減らす設定の扱いまで伝えると、手直しが減ります。

トップページの区切りに、background-attachment: fixed で写真を固定した段を1つ作って。
高さは60vh、写真の上の白い文字が読めるよう紺色55%の膜を重ねて。
画面幅768px以上で、prefers-reduced-motion が no-preference のときだけ固定して。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

スマホで写真がどう見えるか。スマホの幅で開き、写真の大事な部分が切れていないか、文字が写真に埋もれていないかを見ます
動きを減らす設定で止まるか。パソコンやスマホの「視差効果を減らす」「アニメーションを減らす」などの設定をオンにして、写真が固定されなくなるかを確かめます
JSでスクロールのたびに位置を動かしていないか。「パララックス」と頼むと、スクロールに合わせて写真をJSで動かすコードが出ることがあります。この見せ方ならCSSだけで足ります

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

トップページやLPの、話の区切り。「会社の紹介」から「施工事例」へ移るところなど、気分を切りかえたい場所に1か所入れます
写真そのものに力があるサイト。建物・風景・料理など、写真を大きく見せたい業種で、文章のあいだの「窓」として使います
ページの一番上の大きな写真。3の sticky の形にすると、iPhoneでも次の内容が写真の上に重なってくる見え方にできます

使わない場面

人物や商品の写真。画面の大きさで切り取られる場所が変わるので、顔や商品が段から外れることがあります
何か所も続けて使う。1ページに1〜2か所までにします。続けると文章が読みにくくなります
大事な情報を写真の中の文字で伝える。写真の一部しか見えないので、読めない人が出ます。文字はHTMLで書きます

KAKERUなら、4の形を基本にします。
パソコンで動きを減らす設定がオフの人にだけ固定して、スマホではふつうの背景で写真をきちんと見せます。

まとめ

background-attachment: fixed で、背景の写真を画面に固定できる
固定した背景の大きさと位置は、画面全体が基準になる。真ん中に主役がある写真を選ぶ
写真の上の文字は、暗い膜か白い帯で読みやすくする
iPhoneのSafariでは効かない。一番上の写真なら sticky で同じ見え方にできる
スマホの幅と動きを減らす設定では、ふつうの背景にする

まずは4のコードを、トップページの区切りの1か所に入れて、パソコンとスマホの両方で見比べてみてください。

参考にした資料

いずれも2026年11月13日に確認しました。内容は変わることがあります。最新の情報は各ページでご確認ください。

MDN「background-attachment」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-attachment
※fixed は背景を画面（ビューポート）に固定し、要素がスクロールしても背景は動かないこと。scroll（初期値）・local の意味。対応表で、iPhoneのSafariでは fixed が「認識はされるが効果がない」とされていること
MDN「Using multiple backgrounds」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Using_multiple_backgrounds
※背景をカンマで区切って重ねられること。値の数が背景の枚数より少ないときは、くり返して当てはめられること
MDN「position」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position
※sticky は、ふだんは文書の流れどおりに置かれ、スクロールする箱の中で top などの位置に来ると止まること
MDN「prefers-reduced-motion」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
※見る人が、端末の設定で動きを減らすよう求めているかを調べられること
W3C「CSS Backgrounds and Borders Module Level 3」（英語）
https://www.w3.org/TR/css-backgrounds-3/
※fixed のときは、背景の位置と大きさの基準が要素ではなく画面全体（初期包含ブロック）になること
W3C「Understanding Success Criterion 2.3.3: Animation from Interactions」（英語）
https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html
※背景と手前が違う速さで動く見せ方（パララックス）は、めまい・吐き気などの原因になることがあり、多くの場合なくてもよい動きとされていること