CSS
【注意】background: fixed; はiPhoneに向いてない？スマホで効かない理由と対処法
【注意】background: fixed; はiPhoneに向いてない？スマホで効かない理由と対処法
もくじ
この記事でわかること
- background: fixed; の役割
- iPhoneでうまく動かない理由
- 対応させるための方法や代替手段
background: fixed; って何？
背景画像を画面に固定するためのCSSプロパティ。
body {
background-image: url("bg.jpg");
background-attachment: fixed;
}
これを使うと、ページをスクロールしても背景画像が動かず、パララックス風の演出ができます。
でもiPhoneでは効かない…？
はい、その通り。
特にSafariでは無視されることが多いです
効かない例：
background-attachment: fixed;
なぜiPhone（iOS Safari）では効かないの？
以下のような理由があります。
1. パフォーマンスの問題
iPhoneなどのモバイルデバイスは、バッテリー消費を抑えるために
background-attachment: fixed; のような「描画コストの高い動き」は意図的に無効化されています。
2. スクロールの仕様が違う
iOS Safariは、スクロールの仕組みがデスクトップと違っていて、背景と前面を同時に固定するような描画が難しいです。
どうすればいい？代替手段は？
方法1：JavaScriptやCSSで「パララックス風」にする
ライブラリを使ったり、スクロール量に応じて背景を動かす方法です。
たとえば：
background-attachment: scroll;
// スクロール量に応じて背景を動かす（擬似 fixed 効果）
window.addEventListener("scroll", () => {
const scroll = window.scrollY;
document.body.style.backgroundPositionY = `${scroll * 0.5}px`;
});
方法2：固定背景に見えるように、背景用のdivを使う
ライブラリを使ったり、スクロール量に応じて背景を動かす方法です。
たとえば：
<div class="bg"></div>
<div class="content">ここに本文</div>
.bg {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: url("bg.jpg");
background-size: cover;
}
こうすると、見た目上は固定背景のように見せることができます。
モバイルにも対応可能です！
まとめ
| 方法 | iPhone対応 | 備考 |
|---|---|---|
| background: fixed; | × | iOSでは無効になることが多い |
| JSで背景を動かす | ○ | ややテクニカルだが見た目は再現可能 |
| 背景用のdivで再現 | ◎ | 一番確実。CSSだけで対応可能 |
| 方法 = background: fixed; | iPhone対応 = × | 備考 = iOSでは無効になることが多い |
|---|---|---|
| 方法 = JSで背景を動かす | iPhone対応 = ○ | 備考 = ややテクニカルだが見た目は再現可能 |
| 方法 = 背景用のdivで再現 | iPhone対応 = ◎ | 備考 = 一番確実。CSSだけで対応可能 |
最後にひとこと
背景固定（background: fixed;）は見た目の印象をアップさせる便利なCSSだけど、
スマホとくにiPhoneでは要注意！
ブログやLPなどスマホでの見た目が大事な場面では、
「背景だけのdivを使う方法」がもっとも安定しておすすめです！
