[css]iPhone対応の背景画像固定表示をやる方法

パクリというよりはオマージュ。

どういうことか
ネタは既にあがっている
ページ内に複数設置できる背景固定方法（仮）

どういうことか

パララックス的なことがしたいとか理由はどうあれ、ページをスクロールしたときに背景画像はスクロールさせずに固定表示したいよねって時がある。コンテンツ領域に耐えられる画像サイズを用意できない場合にも表示領域さえ確保できたら済むことになるので活用シーンは多い。

導入自体は簡単で、cssだけで完結する。

.bg{
    background: url(背景画像) no-repeat center;
    background-size: cover;
    background-attachment:fixed;
}

だけど、これはiPhoneに対応してないのでレスポンシブ前提のページには使えないぞどうすんだよって話。バグだとか言われてるけど流石に何年も放置されてるなら仕様だと割り切ったほうが早い。

要するに、諦めたくなかったらbackground-attachment:fixed;とbackground-size: cover;の組み合わせを使わずに背景固定しようぜっていうレギュレーションが発生している。

ネタは既にあがっている

検索すれば2018年にとてもわかりやすい記事が書かれている。

background:fixedでの背景固定はiOS（iPhone）でうまく動かないのでこれを使いましょう - YCOMのホームページの制作・運営に役立つブログ

自宅もちょっと作業がしやすい環境になってきて、休日でもブログを書けるようになってきました。休日は仕事しないっ

この記事に似た内容をアップしてる人もいるから鉄板なんだろうね。

CSS｜iPhoneやiPadでも背景を固定 | golbitz

背景の固定にはbackground-attachment: fixedという便利なものもあるんですが、iosで

cssで完結できる対処法なのでとても素晴らしいんだけど、でもまあこれもちょっと難点がある。

ページ自体に背景画像が付いちゃうことになる。だから、一部のコンテンツだけ背景固定やりたいのにって場合に向かない。コンテンツをブラウザ幅いっぱいの領域で切って、表示させたくないときは背景色をつけるみたいなことで対応することになる。あと、この方法だと1ページに1枚しか背景固定ができないって制限も掛かることになる。ならない？なるよね。

ページ内に複数設置できる背景固定方法（仮）

html側にタグを加えなきゃいけないけどまあ、悪くはない。

厳密に言うと背景固定じゃない。

<div class="wrap">
    <div class="content"></div>
    <div class="bg"><div class="inner"></div></div>
</div>

.wrap{ position: relative;}
.bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.bg .inner{
    width: 100%;
    height: 100vh;
    background: url(背景画像) no-repeat center;
    background-size: cover;
    display: block;
    position: sticky;
    top: 0;
}

こんな感じ。

position:absolute;でコンテンツの裏側に.bgを設置。.innerを表示領域サイズにして、position:sticky;でスクロール追従にして、やる。

position:sticky; だから、背景領域がブラウザに収まるまではスクロールするし、ケツまで来たときもスクロールする。疑似固定です。

position:sticky; はこの記事を読むと理解しやすい。

position: sticky;の仕組みや実際の使い方をやさしく解説

position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける（スティッキー）便利なプロパティです。 position:

object-fitのことを考えたら.innerに<img>をぶち込んじゃってもいいんだけど、背景画像を選択できるって状況があまり好きじゃないのでcss側で指定した。応用として、.innerにスライダーを入れたら切り替わる背景画像が導入できる。

気分が変わったら位置を変えて背景をアイキャッチ化することも簡単だし、良いんじゃないでしょうか。