background-imgの配置が上手く移動しません

前提・実現したいこと

水色のサークル画像を大きさを調整しつつ、かつ右に配置したいです。
（見本画像をご覧ください。）

どうぞご教授頂けますと幸いです。

該当のソースコード

HTML
1 <div class=" fv">
2        <div class="fv-wrapper bg-img flex-box">
3            <div class="text-wrapper">
4                <div class="copy">
5                    <p class="main-copy">コーディングの手間を<br> 最小に、デザインに注力 <br> する助けに</p>
6                    <p class="ja-copy">ユアコーディングはコーディングに<br> 特化したフリーランス<br> デザインに注力されたい方の<br> 助けになります</p>
7                </div>
8                <p class="btn">お問い合わせ</p>
9            </div>
10         <div class="img-wrapper">
11            <img src="img/manager.png" alt="" class="fv-img">
12         </div>
13        </div>
14       
15  
16    </div>

該当のソースコード

CSS
1html body .fv-wrapper {
2  background-image: url(../img/sercle.png);
3  background-repeat: no-repeat;
4  background-position: 800px;
5  background-size: cover;
6  /*    position:absolute;
7    right:0; */
8}
9
10html body .flex-box {
11  display: -webkit-box;
12  display: -ms-flexbox;
13  display: flex;
14  -webkit-box-pack: justify;
15      -ms-flex-pack: justify;
16          justify-content: space-between;
17  -webkit-box-align: center;
18      -ms-flex-align: center;
19          align-items: center;
20}

試したこと

■margin-left:auto

■widthを外してみる
→widthを外すと画像が見切れることはなくなったが、画像の大きさを調整したいのでこの方法ではだめ

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

OS:Windows
エディタ:Brackets
ブラウザ:クローム

ご回答を受けて

頂きましたご回答を参考に直してみましたところ、以下のようになり、fv-wrapper領域からはみ出してしまいました。
領域外の影響範囲に関してはこちらの説明不足で大変失礼致しました。

引き続きご教授頂けますと幸いです。
■試したこと
fv-wrapper::beforeにheightを設定
overflow: hidden;を設定

css
1html body .fv-wrapper {
2  position: relative;
3  width: 100%;
4  /* beforeにabsoluteを効かせるためwrapperにrelativeを設定する */
5}
6
7html body .fv-wrapper::before {
8  content: url(../img/sercle.png);
9  position: absolute;
10  right: -300px;
11  top: -500px;
12  -webkit-transform: scale(1.3);
13          transform: scale(1.3);
14  z-index: -1;
15  overflow: hidden;
16  /*    position:absolute;
17        right:0; */
18}

現在の状況は以下になります↓

サークル画像を収めたい理想の領域はコチラになります↓

※収めたい領域が分かりやすいようbackground-color:yellowを一時的に設定しておりますが、デザインとは無関係です。
※widthに関しては1000pxだと足りなかったので100%に変更させてもらっています。

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

回答1件

ベストアンサー

.fv-wrapperの背景画像ではなく、.fv-wrapperのbefore疑似要素にcontentとして画像を入れ、positionをabsoluteにして好きな位置に移動させる方法が良いかと思います。
そうすれば親ボックスの領域のせいで画像が切れることもないです。
画像の大きさはtransformで調整できます。

以下、検証コード

css
1/* 抜粋 */
2html body .fv-wrapper {
3  /* beforeにabsoluteを効かせるためwrapperにrelativeを設定する */
4  position: relative;
5  width: 1000px;
6}
7.fv-wrapper::before{
8  /* bg-imageじゃなくて、contentで画像を入れて良い。svgならモアベター */
9  content:url(/img/circle.png);
10  /* absoluteにして好きな場所へ移動させされるようにする */
11  position: absolute;
12  right: -300px;
13  top: -200px;
14  /* 大きさ調整はscaleで行うと便利。 */
15  transform: scale(1.3);
16  /* z-indexを下げないとメインビジュアルを隠してしまう */
17  z-index: -1;
18}

適当に作ったデモ画像：

投稿2021/05/19 17:24

hope_mucci

総合スコア4447

mitrasi

2021/05/19 19:38

hope_mucci様ご回答ありがとうございます！！疑似要素でという発想はありませんでした。大変助かります！早速試してみましたところ、おかげさまで近いところまではいけたのですが、なぜか上だけfv-wrapperの領域からはみ出されて表示されてしまうためheaderエリアに係ってしまっている状況です。画像がきっちりfv-wrapper部分のみだったため、説明不足で失礼致しました。追記致しますのでお手数お掛けしますが、引き続きご相談に乗っていただけますと幸いです。