背景画像の埋め込みについて

Html
コード

<!doctype html> <html lang="ja"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> <title>Hello, world!</title> </head> <body> <header> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <a href="#" class="navbar-brand">AFS-1000</a> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link active" href="#home">トップへ</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">よくある質問</a> </li> </ul> </div> </nav> </header>   <main> <div class="main-img"> <div class="main"> <h1>よくある質問</h1> </div> </div> </main>  <div class="panel-heading"> <h4 class="panel-title bg-primary text-white">検査に関して </h4> </div> <div class="accordion" id="accordion-4"> <div class="card"> <div class="card-header" id="header-4a"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#card-4a" aria-expanded="true" aria-controls="card-4a"> <p><span>Q.</span>検査結果が出るまでの所要時間「8分」は適正なのでしょうか？<span>+</span></p> </button> </div> <div id="card-4a" class="collapse" aria-labelledby="header-4a" data-parent="#accordion-4"> <div class="card-body"> <p><span>A.</span>Covid-19の検査結果に関する国際基準が設定されていないため、それぞれのメーカーが研究を重ね、的確な結果が出るように機器を設計しています。本機器については手順通りの時間（8分）で測ることをお勧めします。</p> </div> </div> </div> <div class="card"> <div class="card-header" id="header-4b"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#card-4b" aria-expanded="false" aria-controls="card-4b"> <p><span>Q.</span>IgM,IgGの基準の単位T/Cとはなんでしょうか？<span>+</span></p> </button> </div> <div id="card-4b" class="collapse" aria-labelledby="header-4b" data-parent="#accordion-4"> <div class="card-body"> <p><span>A.</span>Target/Control. Tは感染、Cは非感染の免疫グロブリンを表します。</p> </div> </div> </div> <div class="card"> <div class="card-header" id="header-4c"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#card-4c" aria-expanded="false" aria-controls="card-4c"> <p><span>Q.</span>蛍光抗体検査機器の精度はどのくらいでしょうか？<span>+</span></p> </button> </div> <div id="card-4c" class="collapse" aria-labelledby="header-4c" data-parent="#accordion-4"> <div class="card-body"> <p><span>A.</span>95%以上の精度となっています。</p> </div> </div> </div> <div class="card"> <div class="card-header" id="header-4d"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#card-4d" aria-expanded="false" aria-controls="card-4d"> <p><span>Q.</span>基準値（カットオフ）について、イタリアとその他の国がなぜ違うのでしょうか？<span>+</span></p> </button> </div> <div id="card-4d" class="collapse" aria-labelledby="header-4d" data-parent="#accordion-4"> <div class="card-body"> <p><span>A.</span>コロナに対するIgG IgM の世界的な基準となるカットオフは定められておりません。イタリアは自国民とコロナウィルスの関連性に関して研究が進んでおり、イタリアに住んでいる民族に対して的確と考えうる基準値が決められています。</p> </div> </div> </div> </div> <div class="panel-heading"> <h4 class="panel-title bg-primary text-white">検査に関して </h4> </div>

<div class="accordion" id="collapse-accordion">
    <div class="card mb-2">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link btn-block text-center" type="button" data-toggle="collapse" data-target="#collapse-accordion-1">
            <p><span>Q.</span>IgM値が0.00となるのはなぜでしょうか？<span>+</span></p>
          </button>
        </h5>
      </div>
      <div id="collapse-accordion-1" class="collapse" data-parent="#collapse-accordion">
        <div class="card-body">
            <p><span>A.</span>その時点でIgMが確認できない程小さな値だった際に0.00を示します。</p>
        </div>
      </div>
    </div>
    <div class="card mb-2">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link btn-block text-center" type="button" data-toggle="collapse" data-target="#collapse-accordion-2">
            <p><span>Q.</span>基準値（IgM:1.3、IgG:1.2）を少し超えた場合のどのような対応をすればよいでしょうか？<span>+</span></p>
          </button>
        </h5>
      </div>
      <div id="collapse-accordion-2" class="collapse" data-parent="#collapse-accordion">
        <div class="card-body">
            <p><span>A.</span>カットオフ値を若干上回った陽性という結果となるため、再テストをお勧めいたします。</p>
        </div>
      </div>
    </div>
  </div>
<footer>
    <div class="contact">
    <h5 class="text-center">ご不明点がございましたら
        メールにてお問合せください。</h5>
    </div>  
    <div class="contact contact-btn text-center">
        <a href="#" class="btn btn-danger">お問合せ</a>
    </div>  
</footer>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body> </html> <body>

CSS
1コード
2```body {
3    font-family: 'Lato', sans-serif;
4    color: #505962;
5  }
6  /* navbar */
7  .navbar {
8    text-transform: uppercase;
9    font-weight: 700;
10    font-size: 0.9rem;
11    letter-spacing: .1rem;
12    background: rgba(0,0,0,1)
13  }
14  .navbar-nav li {
15    padding-right: 0.7rem;
16  }
17  .navbar-dark .navbar-nav .nav-link {
18    color: #fff;
19    padding-top: 0.8rem;
20  }
21  .navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link:hover{
22    color: #1ebba3;
23  }
24/* main */
25main{
26    width: 100%;
27    height: 400px;
28}
29/* panel */
30.panel-title{
31    padding-left: 20px;
32    padding: 10px;
33}
34.panel-heading{
35    margin-top: 30px;
36}
37/* card */
38.card{
39    text-align: center;
40}
41.accordion{
42    margin-top: 20px;
43}
44.card-header p{
45    color: #505962;
46}
47.card-header span{
48    color: rgb(16, 78, 211);
49    margin: 0 20px;
50}
51.card-body span{
52    color: rgb(219, 43, 79);
53    margin: 0 20px;
54}
55/* contact */
56.contact{
57    margin-top: 40px;
58}
59.contact-btn{
60    margin-bottom: 100px;
61}
62以前質問して修正したものです。
63htmlファイルの方で画像を表示させようとすると画面に収まらないサイズで表示されます。
64よろしくお願いします。