親要素全体に背景画像を広げたいです

レスポンシブデザインでスマートフォンサイズにしたときに背景画像が親要素全体（高さ）に広るようにしたいです。

問題
１、問題の画像　写真１
２、親要素全体（高さ）に背景画像が広がらない　写真２

行った事
１、親要素（cont1）の高さを変えてみましたが、下の方が短くなるだけでした。

２、background-size:100% auto;/この場合は高さが自動設定/
background-size:auto 100%;/この場合は幅が自動設定/
background-size:contain; などcover以外にも挑戦しましたが、ここの余白は変わりませんでした。

この余白をなくすために何をしなければいけないのか、それとも背景画像を親要素全体に広げるべきなのか、またその方法を教えていただけたら幸いです。長々となってしまい申し訳ありません。何卒よろしくお願いします。

写真１
写真２　この余白を無くしたいです。（pc用ではちゃんと高さいっぱいに広がっています。）

HTML
1コード　<section>
2         <div class="cont1">
3          <div class="cont1-center">
4            <div class="center-top"><h2 style="margin-bottom: 15px;">プログラミングで</h2><h2 style="margin-top: 15px;margin-bottom: 10px;">人生の安定を手に入れよう</h2></div>
5            <div class="center-img"><img src="isaralogo.png"></div>
6            <div class="center-under"><h3>バンコクのノマドエンジニア育成講座<div class="改行-center">iSara［イサラ］</div></h3></div>
7          </div>
8        </div>
9      </section>

scss
1コード
2* {
3  box-sizing: border-box;
4  
5}
6body {
7  margin: 0;
8  font-family: "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", "���C���I", Meiryo, Osaka, "�l�r �o�S�V�b�N", "MS PGothic", sans-serif;
9}
10  
11div {
12  display: block;
13}
14.header-cont,.cont1,.cont2,.cont3,.cont4,.cont5,.cont6,.cont7,.cont8,.cont9,.cont10,.cont11,.cont12,.cont13,.cont14,.cont15,.cont16,.cont17,.cont18 {
15  max-width: 100%;
16  margin: 0 auto;
17}
18img {
19  max-width: 100%;
20  height: auto;
21}
22// レイアウト幅
23$layout-width-inner: 1180px;
24
25// ブレークポイント
26$breakpoints: (
27  "sp": "screen and (max-width: 767px)",
28  "tab": "screen and (max-width: #{$layout-width-inner - 1px})",
29  "pc": "screen and (min-width: #{$layout-width-inner})",
30);
31// メディアクエリー
32@mixin mq($breakpoint: sp) {
33
34  @media #{map-get($breakpoints, $breakpoint)} {
35
36    @content;
37  }
38} 
39.cont1 {
40  background-image: url(main.jpg);
41  background-size: cover;
42  height: auto;
43  
44  @include mq('sp') {
45    background-image: url(mainsp.jpg);
46    background-size: cover; 
47    
48  }
49  .cont1-center {
50    text-align: center;
51    padding: 75px 0px;
52    .center-top {
53      font-size: 20px;
54      color:$isara-color;
55    }
56    .center-img {
57      img {
58        width: 22%;
59      }
60    }
61    .center-under {
62      h3 {
63        font-size: 21px;
64        color: $isara-color;
65        line-height: 1.1;
66        margin-top: 30px;
67      }
68    }
69  }
70}

yuki84web

2020/01/09 12:22

最前面表示の固定ヘッダーが重なって、上部が隠れている…とかではないですよね？

kosan

2020/01/09 12:55

コメントありがとうございます。初心者なんで言葉をちゃんと理解しているかわからないですが、確認したところヘッダーが重なってていう状態ではなかったです。 ※固定ヘッダーが余白の部分と重なってはいないという理解で解釈しておいます。

kei344

2020/01/09 17:04

「ヘッダーが重なって」は画像半分くらいスクロールしたところでスクリーンショットを取ると判別できると思います。HTMLの表示の崩れについては、崩れたところだけでなく全体のコード（CSS/HTML両方）を見ないとわからないことがあります。

kosan

2020/01/10 10:59

大変返事が遅くなり申し訳ありません。貴重なアドバイスをありがとうございます。これからは、そのように全体のコードも含めて伝えていきます。昨日の問題ですが、先ほど自分自身でもう一度調べて一つ試してみました。その結果、background-position:center;でうまくいきました。しかし、なぜそれでうまくいけたのかがまだわかっていません。 background-positionは画像の位置を指定するものであり、centerにする事で真ん中に行くのはわかりますが、なぜこの空白が無くなったのでしょうか？もしよろしければ教えていただけると幸いです。

kei344

2020/01/10 11:11

（再掲）HTMLの表示の崩れについては、崩れたところだけでなく全体のコード（CSS/HTML両方）を見ないとわからないことがあります。

kosan

2020/01/10 13:43

全体のコードとはどれぐらいですか？ footerまで送れば良いでしょうか？