お問い合わせはコチラから

iOSでbackground-attachment:fixedが表示されない不具合の解決方法

サイト運営

iOSのsafariでCSSで指定したbackground-attachment:fixedが表示されない時があります。これはiOS safariの有名な不具合なのですが、実機でしか再現しないので結構厄介な問題になりがちです。

この記事では、スマホだけ背景画像が表示されない!という問題が起きた時のために、解析の参考となる原因と解決策をまとめてあります。

background-attachment:fixedが表示されない条件は?

「background-attachment: fixedとbackground-size: coverを同時に使うとiOSで問題が起きる」

解決方法は?

解決方法は疑似要素を使うことです。

background-attachment:fixedを指定していた要素の疑似要素としてCSSを追加します。

元のCSSはいりません。

body::before {
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100vw;
    height:100vh;
    background:url("img/sample.jpg") no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
    content:"";
}

まとめ

background-attachment: fixedとbackground-size: coverを同時に使う場面は、意外と多く、結構な頻度で問題が起きます。

スマホだけ、背景画像が表示されない時には、この記事を思い出して解析してみてください。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました