niwaka-web

webサイト構築関連のにわか知識集

CSS

【CSS】スマホでbackground-attachment: fixed;が効かない【メモ】

投稿日:

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。
CSSでパララックス(視差)の勉強していた際のメモです。
iosでbackground-attachment: fixed;は仕様?バグ?で使用出来ないようです。
androidでもダメでした。どちらもブラウザによっては出来るのかもしれませんが。

実装例

説明よりは実際の状態を見た方が早いかと思うので、まずサンプル。

See the Pen iosでbackground-attachment: fixed;が効かない by niwaka-web (@niwaka-web) on CodePen.

PC上では、背景が固定されてパララックス風に表示されます。
スマホでは、背景が固定されず普通に画像が並んでる風にしか見えません。
最初iOSだけの仕様かと思いましたが、android系もダメなようですね。
参照:Can I use

対応策

googleなどで検索して調べるとスマホ用の対応策として「::before」などの擬似要素で代用する記事がありますが、こちらは全面背景(ページ全体の背景)として使用する際の策のようです。
ですので、上記のサンプルのような複数枚の画像を使用するものには対応していないと思われます。
背景画像が一枚で良ければ「::before」などの擬似要素で対応し、複数枚の使用の場合は諦めて他の対応を考えた方が良さそうです。

メモ

ついでに、background-attachment: fixed;指定している時にbackground-size: cover;を指定してもiosだと、画像が拡大されるとか挙動がおかしいとか問題ありそう。

-CSS
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【CSS】子セレクタの使い方の覚書

ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。 サイト作成をする際にCSSは何百行、何千行にもなることがあるので、出来るだけわかりやく汎用的に書ける様にするために覚えて …

【CSS】擬似クラス「構造擬似クラス」の使い方の覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 擬似クラスは数が多いので、まずは「構造擬似クラス」の覚書。他の擬似クラスは別ページで作成予定。 「擬似要素と擬似クラスの違いの覚 …

【Bootstrap4】グリッドレイアウト(列の自動レイアウト)

Bootstrap4のグリッドレイアウトの説明は長いので列の自動レイアウトは別ページに。 Bootsatrap4からはグリッドシステムにcss3のflexboxが利用されるようになりました。 .col …

【CSS】属性セレクタの使い方の覚書

ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。 使いこなせてないCSSセレクタ第4弾「属性セレクタ」の覚書。 目次 属性セレクタの概要 属性セレクタの使用例 個人的メモ …

【CSS】画像とテキストをレスポンシブでPCで左右交互にスマホで上下にレイアウト【メモ】

今回の記事は、前回の記事の続きになります。 レスポンシブサイトでよく見かける画像とテキストを左右交互に、スマホで上下に配置してくレイアウトをflexboxを利用して実装する方法の個人的メモ。 ようやく …