footerメニューが上にきてしまう、背景画像の下にコンテンツなどを載せたい

質問させていただきます。

・footerとしていても背景画像の上に文字がきてしまう
・背景画像の下に紹介文やnewsなどの更新情報を掲載したい(文字が全て背景画像の上に表示されてしまう)

現在、この2つが上手くできず、困っております。

おそらくどちらもcssのどこかの設定が上手くいっていないと思うのですが、自分ではわからなかったので、助言がいただきたいです。

どこが必要なコードかも理解できていないので、長くなってしまいますが、宜しくお願い致します。

《HTML》

<body>
  <header>
    <div class="icon"><img src="image/logo.png" alt=""></div>
    <nav>
      <ul>
        <li><a href="#" class="active">TOP</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">講師紹介</a></li>
        <li><a href="#">入会までの流れ</a></li>
        <li><a href="#">料金表</a></li>
        <li><a href="#">過去実績</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
      </nav>
      <div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
  </header>
  <main>
    <div class="text">
      <h2>自分史上、最高の歌声に</h2>
    <h2>声の超専門家集団 </h2>
    <h2>WORLD VOICE</h2>
    <p>世界レベルの歌唱力が身につく</p>
    <p>最高のアーティストスクール</p>
    </div>
  </main>

  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('.menu-toggle').click(function() {
      $('nav').toggleClass('active')
    });
  })
</script>

<section class="features">

  <h1>NEWS</h1>

    <section>
      <h1>動画更新情報</h1>

        <section>
          <h2>2020.7.1</h2>
            <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </section>

    <section>
      <h2>2020.6.1</h2>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </section>

    <section>
      <h2>2020.6.1</h2>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </section>

    <section>
      <h2>2020.6.1</h2>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </section>

    <section>
       <h2>2020.6.1</h2>
          <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </section>
  </section>
</section>
</body>







  <section class="call-to-action">
    <h1>無料カウンセリングに参加する</h1>
    <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </section>

<footer>
  <div class="footer-list">
    <ul>
      <li><a href="#" class="active">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">WORKS</a></li>
      <li><a href="#">BLOG</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>


  </div>
  <div class="social">
    <i class="fab fa-facebook-f"></i>
    <i class="fab fa-instagram"></i>
    <i class="fab fa-twitter"></i>
    <i class="fab fa-youtube"></i>
  </div>
  <section class="copyright">
    <p>Copyright © 2013 WRLD Co.,Ltd. All Rights Reserved.</p>
    </section>
</footer>
</html>

《CSS》

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url(../image/bg.jpg);
  background-attachment: fixed;
  background-position: center;
  font-size: 16px;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  background: #5f5f5f;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
}

header .icon {
  color: #fff;
  line-height: 50px;
  height: 50px;
  font-size:24px;
  float: left;
  margin-left: 20px;
  font-weight: bold;
}

header nav {
  float: right;
}

header nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}

header nav ul li {
  list-style: none;
  margin-right: 10px;
}

header nav ul li a {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  color: #fff;
  text-decoration: none;
  display: block;
}

header nav ul li a:hover,
header nav ul li a.active {
  color: #000;
  background: #fff;
}

.menu-toggle {
  color: #fff;
  float: right;
  line-height: 50px;
  font-size: 24px;
  cursor: pointer;
  display: none;
}
.text {
  position: absolute;
  top: 30%;
  left: 10%;
  width: 40%;
  height: 200px;
  font-family: serif;
  z-index: 1;
  color: #fff;
}

h2 {
  font-size: 30px;
  font-weight: bold;
  text-shadow: 0 0 5px;
}

h3 {
  font-size: 20px;
}

.copyright {
  display: block;
  color:black;
  font-size: 10px;
  text-align: center;
}

header .icon img {
  height: 100%;
}

.features {
  
  display: block;
  position: flex;
}

《responsive》

@media (max-width: 991px) {
  header{
    padding: 0 20px;
  }
  .menu-toggle {
    display: block;
  }
  header nav.active{
    left: 0;
  }
  header nav {
    position: absolute;
    width: 100%;
    height: calc(100vh - 50px);
    background: #5f5f5f;
    top: 50px;
    left: -100%;
    transition: 0.5s;
  }
  header nav ul {
    display: block;
    text-align: center;
  }
  header nav ul a {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
  }
  .text {
  text-align: center;
  top: 35%;
  left: 13%;
  width: 75%;
  }
  h2 {
    font-size: 25px;
  }
  h3 {
    font-size: 17px;
  }
}

.social {
  margin:0;
}
header .icon img {
  height: 100%;
  text-align: left;
}

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

回答1件

ベストアンサー

「</body>」の下に<footer>などのタグがあるのはおかしいので、</body>を</html>の直前の位置に移動してください。そのうえで、現在<body>がある位置に、<div class="aaaa">を追加してみてください。

HTML
1<body><!-- bodyは外側の要素 -->
2
3
4
5  <!-- .aaaaを追加、<body>と分離 -->
6  <div class="aaaa">
7    <header>
8      <div class="icon"><img src="image/logo.png" alt=""></div>
9      <nav>
10        <ul>
11          <li><a href="#" class="active">TOP</a></li>
12          <li><a href="#">NEWS</a></li>
13          <li><a href="#">講師紹介</a></li>
14          <li><a href="#">入会までの流れ</a></li>
15          <li><a href="#">料金表</a></li>
16          <li><a href="#">過去実績</a></li>
17          <li><a href="#">お問い合わせ</a></li>
18        </ul>
19      </nav>
20      <div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
21    </header>
22    <main>
23      <div class="text">
24        <h2>自分史上、最高の歌声に</h2>
25        <h2>声の超専門家集団 </h2>
26        <h2>WORLD VOICE</h2>
27        <p>世界レベルの歌唱力が身につく</p>
28        <p>最高のアーティストスクール</p>
29      </div>
30    </main>
31    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
32    <script type="text/javascript">
33      $(document).ready(function() {
34        $('.menu-toggle').click(function() {
35          $('nav').toggleClass('active')
36        });
37      })
38    </script>
39    <section class="features">
40      <h1>NEWS</h1>
41      <section>
42        <h1>動画更新情報</h1>
43        <section>
44          <h2>2020.7.1</h2>
45          <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
46        </section>
47        <section>
48          <h2>2020.6.1</h2>
49          <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
50        </section>
51        <section>
52          <h2>2020.6.1</h2>
53          <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
54        </section>
55        <section>
56          <h2>2020.6.1</h2>
57          <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
58        </section>
59        <section>
60          <h2>2020.6.1</h2>
61          <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
62        </section>
63      </section>
64    </section>
65  </div><!-- .aaaa -->
66
67
68  <section class="call-to-action">
69    <h1>無料カウンセリングに参加する</h1>
70    <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
71  </section>
72  <footer>
73    <div class="footer-list">
74      <ul>
75        <li><a href="#" class="active">HOME</a></li>
76        <li><a href="#">ABOUT</a></li>
77        <li><a href="#">WORKS</a></li>
78        <li><a href="#">BLOG</a></li>
79        <li><a href="#">FAQ</a></li>
80        <li><a href="#">CONTACT</a></li>
81      </ul>
82    </div>
83    <div class="social"> <i class="fab fa-facebook-f"></i> <i class="fab fa-instagram"></i> <i class="fab fa-twitter"></i> <i class="fab fa-youtube"></i> </div>
84    <section class="copyright">
85      <p>Copyright © 2013 WRLD Co.,Ltd. All Rights Reserved.</p>
86    </section>
87  </footer>
88</body><!-- bodyは外側の要素 -->

CSS
1.aaaa {
2  background: url(https://mi-mollet.ismcdn.jp/mwimgs/7/a/640/img_7a61853335e7c97b69f2014b5cc2759282321.jpg);
3  background-attachment: fixed;
4  background-position: center;
5}
6
7body {
8  margin: 0;
9  padding: 0;
10  font-family: sans-serif;
11  /*
12  background: url(https://mi-mollet.ismcdn.jp/mwimgs/7/a/640/img_7a61853335e7c97b69f2014b5cc2759282321.jpg);
13  background-attachment: fixed;
14  background-position: center;
15  */
16  font-size: 16px;
17}