背景画像のレスポンシブ

Question

実装内容

html/cssを使って、スクロールすると、背景画像が切り替わる様なサイトをこのサイトを参考にして作成しているのですが、スマホで見た際に、画像が拡大したものが表示され、全体の画像が表示されません。
なので、描画領域内に背景画像のすべてが表示されるよう拡大・縮小したいです。

試した事

試した事として、以下のコードを使用して見ました。

 background-size:contain

(縦横比を保持、表示領域全体を覆うように背景画像を表示する)
しかし、縦が余ってしまうので何回も繰り返し表示されてしまいました。

そこで、リピートを禁止する様に以下のコードを記入しました。

background-repeat: no-repeat;

###　現在のコード

<div class="fixed-bg bg03 sentence">
			<p>タイトル</p>
		</div>
		 
		<div class="scroll-bg bg-color01" class="start">
			<p style="background-color:#ffcc99;">説明文</p>
		  </div>
        <div class="fixed-bg bg01 sentence">
                <p>タイトル</p>
            </div>
             
            <div class="scroll-bg bg-color01" class="start">
                <p style="background-color:#ffcc99;">説明文</p>
              </div>
             
            <div class="fixed-bg bg02 sentence">
                <p>タイトル</p>
            </div>
             
            <div class="scroll-bg bg-color02">
                <p style="background-color:#ffcc99;">説明文</p>
            </div>

.fixed-bg {
　word-wrap: break-word;
  min-height: 100vh;
  background-attachment: fixed;
  background-size: contain;
  background-position: center;
}
 
.bg01 {
  background-image: url(170923.png);
  background-size: contain; 
  background-repeat:  no-repeat; 
  }
 
.bg02 {
  background-image: url(7211.png);
  background-size: contain;
}
 
.bg03 {
  background-image: url(2377.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.sentence{
  position: relative;
}

.sentence p{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: white;/*文字は白に*/
  font-weight: bold; /*太字に*/
  font-size: 2em;/*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
}

.sentence img{
  width: 100%;
}

Answer 1

どのようなのを目指しているかわかんないんですが

background-size: contain;

と指定する事でサイズはよくなりませんか？

Comments

[退会済みユーザー]

試したのですが、表示されませんでした。

[mouse_484]

画像が表示されないということですか？

[退会済みユーザー]

mouse_484　様
　はい。画像が表示されません。

[mouse_484]

画像URLを確認してください

[退会済みユーザー]

画像が表示されないという表記について、訂正があります。

background-size: contain;
にしたところ、表示域に繰り返して、画像が表示されてしまいます。
よって、以下のコードを試してみました。
background-repeat:: no-repeat
しかし、上記のコードを試したところ、何も表示されませんでした。

[mouse_484]

質問のところにあるcssの

background-sizeをcontainにしてみてください
それで動くはずです

[退会済みユーザー]

以前に、試してみたのですが、うまくいきませんでした。
コードの最新をしていなかった為、試したものを含めコード再提示をしました。
動きませんでした。

[退会済みユーザー]

もし、良ければホームページをレンタルサーバーで公開していますので、ご確認していただけませんか？

[mouse_484]

わかりました

送っていただけたら確認させていただきます

[退会済みユーザー]

ありがとうございます。

実は、プログラミング部を設立させて頂きまして、その際文化祭のホームページ制作をさせてもらう事になったのですが、本番のサイトの公開は良くないですか？