CSS:複数の背景画像を、全画面で表示させたい

Question

前提・実現したいこと

複数の背景画像を、全画面で表示させたい

発生している問題・エラーメッセージ

divに背景を設定する形で
複数枚の背景画像を上から順に
全画面で表示させたいと思っています。

background-size: cover;

を用いておりますが、現状1枚しか認識せず、
もう1枚は真っ白に表示され認識されません。

連続で背景画像を全面に表示させたい場合、
どのようにすればいいかわからず
ご教授願えれば幸いです。

エラーメッセージ

CSS

.bg1 {
  background-image: url(../img/4.png) no-repeat center center;
  background-size: cover;
  min-height: 100vh;
}

.bg2 {
  background: url(../img/5.png) no-repeat center center;
  background-size: cover;
  min-height: 100vh;
}

```HTML
      <div class="bg1"></div>
      <div class="bg2"></div>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[K_3578]

cssも<code>ブロックで囲んでくれると有難いです。
囲む際は1行空けると<code>ブロックがそれぞれ分かれて表示されます。

[m_m3]

初投稿にて、作法のご指摘、大変助かります。承知しました！

[K_3578]

おー、見に来たら解決してた。おめでとうございます。
とりあえず以降の質問投稿前にはヘルプ見られるとよろしいですよ。
https://teratail.com/help/question-tips

Answer 1

.bg1のbackground-imageをbackgroundに修正する形だとどうでしょうか。

.bg1 {
  background : url(../img/4.png) no-repeat center center;
  background-size: cover;
  min-height: 100vh;
}

Comments

[m_m3]

ご回答ありがとうございます！
クロームでみると、やはりbg1が白いまま、bg2はその下に全画面で表示され、変化なしです…。

[mai1210]

一旦cssを保存 ⇒ chromeでページ更新（Shift＋F5など）しても変わらないでしょうか。
変わらない場合、画像がうまくアップされていないか、画像パスが間違っている可能性があります。

白くなっている.bg1部分を右クリック⇒検証を選択すると、Stylesの画面で「background : url(../img/4.png)」の「../img/4.png」が青くなっていると思いますので、さらに右クリックして「Open in new　tab」で、画像単体のパスが合っているか確認してみてください。

[m_m3]

ありがとうございます！！！　上記のご回答で、無事に表示されました！！！
.bg1のbackground-imageを　background　に修正　で、大丈夫でした。
ありがとうございました…！！！！

[mai1210]

解決したようで良かったです！

[m_m3]

初めてここに質問したんですが、本当に良かったです…。
前向きに頑張れます！ありがとうございました！