CSSで背景画像を円弧にカットし、その上に画像を2枚重ねたレイアウトをレスポンシブでも再現できる方法を模索してます。

前提・実現したいこと

CSSで背景画像を円弧にカットし、その上に画像を二枚重ねたレイアウトをPCでもレスポンシブでも再現
したい。
また可能であれば、背景画像を配置した時、画像全体が表示されるのではなく、円弧の範囲内で拡大されて
表示されるので、円弧の範囲内で拡大ではなく、円弧の範囲内で画像全体が表示できないかと行き詰まってます。

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

上記の内容で、作成してますが、PC画面では上手く表示されますが、
レスポンシブにすると背景画像の右側が切れてしまいます。
背景画像の上に重ねてある、画像2枚を削除すると背景画像が表示されます。

また、背景画像を配置した時、画像全体が表示されるのではなく、円弧の範囲内で拡大されて
表示されるので、円弧の範囲内で拡大ではなく、円弧の範囲内で画像全体が表示できないかと
悩んでおります。

該当のソースコード

html
1<!-- 背景画像 -->
2<section class="top-img">
3    <div class="wrap">
4        <div class="arc">
5           <!-- 文字とか入れることも可能 -->
6        </div>
7    </div>
8
9  </section>
10
11   <!-- コーヒーカップ -->
12  <img src="https://drive.google.com/file/d/19VrUmU2LMXdkVJP8Y8ydOw1egkxwlUWS/view?usp=sharing" alt="" class="coffee-img">
13
14 <!-- コーヒーカップの影 -->
15  <img src="https://drive.google.com/file/d/1xPFBG5yDODijqn-IVKcsig3z_9HkhWDD/view?usp=sharing" alt="" class="coffee-img-sd">

css
1.wrap {
2    overflow: hidden;
3    }
4
5
6.arc {
7    background-image: url(https://drive.google.com/file/d/1JdcW9pr8nnUWp1cySLrpsvnNWOJHeX66/view?usp=sharing) ;
8    background-repeat: no-repeat;
9    background-size: cover;
10    background-attachment:fixed;
11    min-height: 30rem;
12    border-bottom-right-radius: 2000px 300px;
13    border-bottom-left-radius: 2000px 300px;
14    margin-left: -200px;
15    margin-right: -200px;
16    padding-left: 200px;
17    padding-right: 200px;
18    }
19
20.coffee-img {
21  position: absolute;
22  z-index: 500;
23  max-width: 30rem;
24  top: 50%;
25  left: 35%;
26}
27
28.coffee-img-sd {
29  position: absolute;
30  z-index: 400;
31  max-width: 30rem;
32  top: 50%;
33  left: 35%;
34}

試したこと

背景画像に関してはbackground-sizeが原因かと思い、変更を加える
また、widthなど加えて指定するなどしてみましたが、上手く行きませんでした。

重ねてある画像2枚についてはpositionの指定が原因かと思い、指定を変更するなど
試したりしてみましたが、思うような形になりませんでした。

もし良ければ皆様のお力をお借りしたいと思いますので、よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

VScodeで作業してます。

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

回答1件

ベストアンサー

とりあえず下記でどうでしょう。
細かいレイアウトは質問者さんのお好みで調整してください。

css
1body {
2    position: relative; /* 追加 */
3}
4
5.wrap {
6    overflow: hidden;
7}
8
9.arc {
10    background-image: url(https://placehold.jp/1920x1280.png);
11    background-repeat: no-repeat;
12    background-position: center; /* 追加 */
13    background-size: cover;
14    background-attachment:fixed;
15    min-height: 30rem;
16    border-bottom-right-radius: 2000px 300px;
17    border-bottom-left-radius: 2000px 300px;
18    margin-left: -200px;
19    margin-right: -200px;
20    padding-left: 200px;
21    padding-right: 200px;
22}
23
24.coffee-img,
25.coffee-img-sd  {
26  position: absolute;
27  z-index: 500;
28  max-width: 30rem;
29  top: 50%;
30  left: 50%;
31  transform: translateX(-50%);  /* 追加 */
32}