heroなどの背景画像表示が上手くいかない

背景画像固定の問題

スマートフォンで実際にアクセスしてみると、heroやカウンター部分の画像（背景画像）が表示されない・表示がおかしいという事があると思います。

PCブラウザの検証ツール、スマホモードでは表示されていますよね。 それなのに実機で表示するとおかしい、という場合はブラウザごとの技術対応状況をまとめているサイトを確認してみましょう。

Can I Use...

　　↓

検索窓にbackground-attachmentと入力して、検索します。

iOS（iPhoneとiPad）ではbackground-attachment: fixedとbackground-size: coverを併用すると、上手く動かないと出てきますね。 現在設定している簡単なCSSだと、iOsではパララックス風表現にならないのです。

背景画像表示の調整

位置固定されているものの、サイズが合わなくなってしまっている背景画像部分。 何とかiPhone/iPadでも見られるように、調整方法してみましょう。

※あまりサイズの関係ない画像を使用されているなど、不都合がない場合はそのまま使用して頂いても大丈夫です。

今回の問題はbackground-attachment: fixedとbackground-size: coverを併用していることですので、最も簡単な修正方法はどちらかのプロパティ指定をやめるという方法です。

解説で使用しているhero画像は大きいのでbackground-size: coverは使いたいです。 ですので、background-attachmentの値をfixed;以外にしてしまう（固定表示をやめる）方法が最も簡単ではあります。

style.css、@media(max-width: 768px) {)内で background-attachmentの値を初期値に変更します。

  .hero,
  #counter,
  .testimonials,
  #contact{
    background-attachment: initial;
  }

画像のサイズが合いました。

ブログ一覧（index.php）のトップ画像部分も、同様に設定するとiOsに対応できます。