背景画像のレスポンシブ

Question

今回発生した問題を確認してもらう為、レンタルサーバーを使用し閲覧する事が可能です。
問題が確認できるサイト
実際のホームページのコピーを使用したので、本文はひかえさ

実現したい事

html/cssを使って、スマートフォンでスクロールすると背景画像が切り替わり、背景画像の間に説明文があるホームページを制作しています
背景画像の表示域に縮小して、写真全体が表示される様にしたいのですが、以下の問題がスマートフォンから表示した所、以下の問題が発生しています。

問題

背景画像をスマホから確認した所、全体が表示される様に縮小されなく、一部だけが拡大して表示されてしまいます。

試した事

background-size: cover;

というコードになってたので、描画領域内に背景画像が全て表示される様に縮小される様にする為、以下のコードに書き換えました。

background-size: contain;

しかし、上記のコードにすると画像が表示されませんでした。

実際のコード

　　＊該当部分のコードのみを提示させていただいています。
全てのコードについては、レンタルサーバーにて本サイトを掲載させていただいていますので、ご確認下さい。
サイト

.fixed-bg {
　word-wrap: break-word;
  min-height: 100vh;
  background-attachment: fixed;
  background-size: contain;
  background-position: center;
}
  /* 1枚目 */
.bg03 {
  background-image: url(2377.png);
  background-size: contain; 
  background-repeat: no-repeat

}


 /* 2枚目 */
.bg01 {
  background-image: url(170923.png);
  background-size: contain; 
  background-repeat: no-repeat
  }
 

 /* 3枚め */
.bg02 {
  background-image: url(7211.png);
  background-size: contain;
  background-repeat: no-repeat;
}
 

実際のページ

レンタルサーバーにて、今回試したコードを使用しているダミーのサイトをレンタルサーバーで、掲載していますので、ご確認ください。サイト

＊PCでは、この問題は確認されておらず、スマートフォンのみこの問題が発生しています。

Comments

[kyoya0819]

CSSはなるべくhead内に書いてください
よく間違える方いらっしゃいますがheaderではありませんheadです。

[退会済みユーザー]

bodyタグ内に書くのではなく、cssはheadタグ内に書くという事でしょうか？

[kyoya0819]

そうです

Answer 1

この質問と同じ現象でしょうか。
HTML - スライドの写真がなんらかの理由で拡大されてしまいます。｜teratail

ただ、この現象であれば、スマホで発生するのではなくてiOSで発生する現象のはずです。

Comments

[退会済みユーザー]

おっしゃっている回答で間違いありません。

しかし、３枚目の画像は表示されないのは、どの様に改善すれば良いのでしょうか？
android端末での確認はしていません。

iosでも、正常に表示する様にするには、どうすれば良いのでしょうか？

[Lhankor_Mhy]

「３枚目の画像は表示されない」とはなんのことですか？
質問にそんなこと書いてありましたっけ……？

[退会済みユーザー]

質問にそんなこと書いてありましたっけ……？
>>> 試した事の中に、"しかし、上記のコードにすると画像が表示されませんでした。"と書いています。

３枚目というのは、３枚目のコードのみをcontainに変えた為であり、現在はcontainを全てのコードにしたため、何も表示されません。

この質問では、表示されないので、どのように改善すれば表示できるのかを教えてもらいたいです。

[Lhankor_Mhy]

ご提示されているURLのページとはまた別、ということですね？
cover をやめて、 contain にしたい、という理解で合っていますか？

[Lhankor_Mhy]

ご提示されているURLのページでも、.bg01 は contain になっているようですが、当方の iOS Safari
では、「画像が表示されない」という問題が確認できませんでした。

問題が再現できるコードをご提示いただけますか？

[退会済みユーザー]

cover をやめて、 contain にしたい、という理解で合っていますか？
>>> 縮小して１枚の画像を表示するために、containを使っているので、coverでのやり方がわからないだけです。

コードを修正し、提示させて上げました。
ご確認ください。

[Lhankor_Mhy]

拝見しました。なぜか2枚目だけ表示されているのですね。なるほど。

[退会済みユーザー]

fixedが細部に隠れて見逃していましたので、外した所、無事解決しました。

ありがとうございます。
今後とも宜しくお願いします。

[Lhankor_Mhy]

ご解決されて何よりです。