背景画像のレスポンシブ

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

実現したい事

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

問題

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

試した事

css
1background-size: cover;

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

css
1background-size: contain;

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

実際のコード

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

css
1
2.fixed-bg {
3　word-wrap: break-word;
4  min-height: 100vh;
5  background-attachment: fixed;
6  background-size: contain;
7  background-position: center;
8}
9  /* 1枚目 */
10.bg03 {
11  background-image: url(2377.png);
12  background-size: contain; 
13  background-repeat: no-repeat
14
15}
16
17
18 /* 2枚目 */
19.bg01 {
20  background-image: url(170923.png);
21  background-size: contain; 
22  background-repeat: no-repeat
23  }
24 
25
26 /* 3枚め */
27.bg02 {
28  background-image: url(7211.png);
29  background-size: contain;
30  background-repeat: no-repeat;
31}
32

実際のページ

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

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

kyoya0819

2019/09/18 22:52 編集

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

退会済みユーザー

2019/09/19 11:26

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

kyoya0819

2019/09/19 11:40

そうです

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

投稿2019/09/19 00:20

Lhankor_Mhy

総合スコア36102

退会済みユーザー

2019/09/19 11:27 編集

おっしゃっている回答で間違いありません。しかし、３枚目の画像は表示されないのは、どの様に改善すれば良いのでしょうか？ android端末での確認はしていません。 iosでも、正常に表示する様にするには、どうすれば良いのでしょうか？

Lhankor_Mhy

2019/09/19 11:28

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

退会済みユーザー

2019/09/19 11:32

質問にそんなこと書いてありましたっけ……？ >>> 試した事の中に、"しかし、上記のコードにすると画像が表示されませんでした。"と書いています。３枚目というのは、３枚目のコードのみをcontainに変えた為であり、現在はcontainを全てのコードにしたため、何も表示されません。この質問では、表示されないので、どのように改善すれば表示できるのかを教えてもらいたいです。

Lhankor_Mhy

2019/09/19 11:43

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

Lhankor_Mhy

2019/09/19 11:48

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

退会済みユーザー

2019/09/19 12:03

cover をやめて、 contain にしたい、という理解で合っていますか？ >>> 縮小して１枚の画像を表示するために、containを使っているので、coverでのやり方がわからないだけです。コードを修正し、提示させて上げました。ご確認ください。

Lhankor_Mhy

2019/09/19 12:24

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