background-imageで設定した画像がきれてしまいます

Question

background-imageで背景を設定しましたが、
添付した画像のように切れて表示されます。

画像全体をちゃんとちゃんと表示させるにはどうしたらよいですか？

ちなみに画像を横縦を固定して縮小させてもかわらないよう
background-size: cover;をつけています
heightを設定すると↑これが効かなくなりました。

高さもしっかり表示させて、background-size: cover;も対応させたいです。。。

ソースコード

html-------------------------------------------------

<div id="home" class="home"> <h1>mmmmmmmm</h1><br> <p>,mmmmmm</p> </div>

---

css---------------------------------------

.home{background-size: cover;
background-position:center top;
background-repeat: no-repeat;

}
#home{
background-image:url("imeges/2.jpg");

}

---

Answer 1

下記のようなことでしょうか。

<div id="home" class="home">
  <div class="inner">
    <h1>mmmmmmmm</h1><br>
    <p>,mmmmmm</p>                            
  </div>
</div>
<p>12346789</p>

.home{
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
#home{
  background-image: url("https://picsum.photos/1200/600");
  width: 100%;
  padding-top: 50%;
  position: relative;
}
.inner {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
}

縦横比が1：2 の場合
100% × (1/2) = 50% をpadding-topを設定します。

Answer 2

.home {
 heigth: XXpx;
 background-size: contain;
 background-position:center top;
 background-repeat: no-repeat;
}

だとどうなるのでしょうか？