画像の折り返しを解決したい

前提・実現したいこと

背景画像の重複してしまうのを止めたい。

こんにちは。html&cssの初学者です。現在ポートフォリオ作成のため、既存サイトの模写をしていますが、divタグ内の背景画像が上下方向にループしてしまいます。元の画像が、指定しているpxよりも大きい場合は問題ないのですが小さい場合に発生していると思います。
何かいい方法はありますでしょうか。ご回答のほどよろしく御願いします。

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

エラーメッセージ

該当のソースコード

HTML
ソースコード
<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="portforio.scss">
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>    
   </head>
  <body>
    <header>
      <h1>MIKE INGHAM DESIGN</h1>
      <div>
      <ul>
        <li><a link="">HOME</a></li>
        <li><a link="">ABOUT</a></li>
        <li><a link="">CONTACT</a></li>
      </ul>
      </div>
    </header>
    <main>
      <span>HELLO</span>
      <div>
        <h2>Designer & front-end developer, creating user-friendly interfaces for websites 
          & applications for startups and entrepreneurs.</h2>
      </div>  
    <div class="container">
      <div class="row ">
          <div class="col-lg-12">
              <div class="row"> 
                  <div class="col-md-6  h100">
                  <!-- 背景画像が小さくループする -->
                    <div class="imageNative" style="background-image: url(image/music.jpg);"></div>
                  </div>
                  <div class="col-md-6  h100">
                   <!-- 背景画像が小さくループする -->
                    <div class="imageNative" style="background-image: url(image/servers.jpg);"></div>
                  </div>
                  <div class="col-md-6  h100">
                    <div class="imageNative">
                      <div class="imageNative" style="background-image: url(image/hospital.jpg);"></div>
                    </div>
                  </div>
                  <div class="col-md-6  h100">
                    <div class="imageNative">
                      <div class="imageNative" style="background-image: url(image/photographer.jpg);"></div>
                    </div>
                  </div>
                  <div class="col-md-6  h100">
                    <div class="imageNative">
                      <div class="imageNative" style="background-image: url(image/payments.jpg);"></div>
                    </div>
                  </div> 
                  <div class="col-md-6  h100">
                    <div class="imageNative">
                      <div class="imageNative" style="background-image: url(image/cocktail.jpg);"></div>
                    </div>
                  </div>                   
              </div>
          </div>
      </div>
    </div>
</main>
<footer></footer>
  </body>
</html>

CSS
ul{
  list-style: none;
}

.imageNative{
  height: 550px;
  display: block;
  background-color: cover;
  background-position: center center;
  margin: 15px 0px;
}