Body要素(HTML)にCSSで画面いっぱいに背景画像を挿入後、footerを下に配置したい。

前提・実現したいこと

HTML5のBody要素にて、背景画像を画面いっぱいに表示させ、下にスクロールさせれば、footerがそれに続くように配置したい。

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

自分で用意した背景画像(1940px:1080px)の画像をBody要素に画面いっぱいに表示することは出来たが、Footerの位置がHeaderの下に配置されてしまう。自作背景画像の右下に波模様があるのでデザイン上その下にfooterを表示させたい。
エラーメッセージ


### 該当のソースコード
<!DOCTYPE html>
<html lang="En">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/style1.css">
</head>
<body>

  <header>
            <a href="" class="logo"><img src="css/images/logo.png"></a>
            <nav>
              <ul>
                <li><a href="">ABOUT SERVICE</li>
                <li><a href="">MEDIA</li>
                <li><a href="">PUBLIC</li>
                <li><a href="">CONTACT US</li>
              </ul>
            </nav>
            <a href="" class="btn">Signin</a>
  </header>

  <main>
    <h1>NEWS</h1>
  </main>

  <div class="footer">
    <small><p class="copy-right">Copy right2021 &copy;</p></small>
  </div>
</body>
</html>




下記CSS記述header部分は省略しています。
@charset "UTF-8";
body{
  background-image: url(../css/images/main12.png);
  background-size: cover;
  background-attachment: fixed;
}
div.footer{
  width:100%;

}
small p.copy-right{
  margin:0px;
  width:100%;
  background-color:#FF3399;
  color: white;
  font-size: 18px;
  text-align: center;
}


```HTML5,CSS3
ソースコード

試したこと

<div>でbodyから外して<img>タグで調整したりしてみましたが背景画像が表示されません。body要素に背景いっぱいに表示させてからでは、そもそも下にfooterなど配置させることは出来ないのでしょうか？

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

](0c752c76cb98141264077c6f3b1856a7.png)
Atomエディタ

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

回答1件

「Footerの位置がHeaderの下に配置されてしまう」の原因は、
mainの高さが足りないのでその下のfooterが上がってきているからです。
下記のようにmainの最小高さを設定すればいいでしょう。

279px は header と footer の高さの合計です。

css
1main {
2  min-height: calc(100vh - 279px);
3}

投稿2021/02/12 00:53

hatena19

総合スコア34075

netclublover

2021/02/12 10:03

解答ありがとうございます！質問の仕方がこちらも不手際でした。最初にパソコン画面で右下に水色の波模様までが出力された後、さらにスクロールするとbodyで配置した背景画像をとは違う真っ白な画面に戻せないのでしょうか？セクションが切り替わると背景画像が変わる感じにしたいのですが...

netclublover

2021/02/12 11:06

お騒がせしました。divを使えば解決できました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Body要素(HTML)にCSSで画面いっぱいに背景画像を挿入後、footerを下に配置したい。

前提・実現したいこと

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

試したこと

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

関連した質問