図形を固定させて、レスポンシブ時に横に

前提・実現したいこと

表題の通りに「daenkei」の画像の位置を固定させて、横に広がらないようにしながら
下記の画像のようにしたいです。

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

・width 100% かつpopsition: absolute; を使って、位置調整すると
横に広がる
・position: fixed;を使うと、固定されるが、ご存知のように、スクロールしても固定されるため、スクロールと同時に,画像(Fv)も付いてくるようになる→これは不適切

試したこと

position: fixed;
position relativeを使って位置調整しながら、探索するも、上記の問題が発生する

該当のソースコード

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title></title>  
6    <link rel="stylesheet" href="./asset/css/destyle.css">
7    <link rel="stylesheet" href="./asset/css/style.css">
8  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
9  <meta name="description" content="">
10</head>
11<body>
12
13<div class="body-wrapper">
14  
15    <section class="fv">
16        <div class="fv_bg">
17            <!-- <img src="./image/daenkei.png" alt="楕円形"> -->
18        </div><!-- /.fv_bg -->
19        <div class="fv-img">
20            <img src="./image/manager.png" alt="管理者">
21        </div><!-- /.fv-img -->
22        <div class="fv-txt">
23            <div class="fv-ttl">コーディングの手間を <br> 最小に、デザインに注力 <br> する助けに</div><!-- /.fv-ttl -->
24            <p>ユアコーディングはコーディングに <br> 特化したフリーランス <br> デザインに注力されたい方の <br> 助けになります</p>
25            <div class="cmn-link fv-link">
26                <a href="#contact-link">お問い合わせ</a>
27            </div><!-- /.fv-img -->
28        </div><!-- /."fv-txt -->
29    </div><!-- /.inner -->
30    </section><!-- /.fv -->

CSS
1@charset "UTF-8";
2/*色*/
3/*basic*/
4/*ボタン*/
5/*fv*/
6/*contact*/
7/*contact 入力背景カラー*/
8.body-wrapper {
9  overflow: hidden;
10}
11
12html {
13  font-size: 62.5%;
14}
15
16body {
17  background-color: #fff;
18  font-size: 1.6rem;
19  font-family: 'Noto Sans JP', sans-serif;
20  color: #333333;
21}
22
23img {
24  width: 100%;
25  height: auto;
26  vertical-align: bottom;
27}
28
29a {
30  text-decoration: none;
31}
32
33li {
34  list-style: none;
35}
36
37
38/*ボタン*/
39.cmn-link {
40  width: 155px;
41  height: 37px;
42  background: -webkit-gradient(linear, left top, right top, from(#FA41CC), to(#6020B0));
43  background: -webkit-linear-gradient(left, #FA41CC, #6020B0);
44  background: linear-gradient(to right, #FA41CC, #6020B0);
45  border-radius: 10px;
46  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
47          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
48}
49
50.cmn-link > a {
51  display: block;
52  color: #fff;
53  font-size: 1.4rem;
54  font-weight: bold;
55  text-align: center;
56  padding-top: 7px;
57}
58
59
60
61.fv {
62  height: 674px;
63  position: relative;
64}
65
66.fv_bg {
67  width: 80%;
68  height: 674px;
69  background-image: url(../../image/daenkei.png);
70  background-repeat: no-repeat;
71  background-size: auto;
72  position: absolute;
73  top: 10%;
74  left: 0%;
75  background-attachment: fixed;
76  background-position: 100% 0%;
77}
78
79.fv .fv-img {
80  max-width: 520px;
81  width: 40%;
82  position: absolute;
83  vertical-align: bottom;
84  top: 250px;
85  right: 65px;
86}
87
88@media screen and (min-width: 600px) and (max-width: 1024px) {
89  .fv .fv-img {
90    width: 50%;
91    position: absolute;
92    top: 40%;
93    left: 40%;
94  }
95}
96
97@media screen and (max-width: 599px) {
98  .fv .fv-img {
99    width: 50%;
100    position: absolute;
101    top: 80%;
102    left: 30%;
103    vertical-align: bottom;
104    padding-top: 10%;
105  }
106}
107
108.fv .fv-img > img {
109  width: 80%;
110}
111
112@media screen and (min-width: 600px) and (max-width: 1024px) {
113  .fv .fv-img > img {
114    width: 100%;
115  }
116}
117
118.fv .fv-txt {
119  position: relative;
120  top: -5%;
121  left: 20%;
122}
123
124@media screen and (max-width: 1025px) {
125  .fv .fv-txt {
126    text-align: left;
127  }
128}
129
130@media screen and (min-width: 600px) and (max-width: 1024px) {
131  .fv .fv-txt {
132    top: 0%;
133    left: 10%;
134  }
135}
136
137@media screen and (max-width: 599px) {
138  .fv .fv-txt {
139    -webkit-transform: translate(15%, 20%);
140            transform: translate(15%, 20%);
141  }
142}
143
144.fv .fv-txt .fv-ttl {
145  font-size: 3.2rem;
146  font-weight: bold;
147  margin-top: 160px;
148  font-weight: bold;
149  position: absolute;
150  top: 60px;
151  left: 10px;
152}
153
154@media screen and (max-width: 599px) {
155  .fv .fv-txt .fv-ttl {
156    font-size: 2.5rem;
157  }
158}
159
160@media screen and (max-width: 1200px) {
161  .fv .fv-txt .fv-ttl {
162    top: 60px;
163    left: -40px;
164  }
165}
166
167.fv .fv-txt > p {
168  display: block;
169  margin-top: 44px;
170  font-weight: bold;
171  position: absolute;
172  top: 350px;
173  left: 10px;
174  line-height: 1.6875;
175}
176
177@media screen and (max-width: 1200px) {
178  .fv .fv-txt > p {
179    padding-top: -30px;
180    left: -40px;
181  }
182}
183
184.fv .fv-link {
185  position: absolute;
186  top: 500px;
187  left: 10px;
188  margin-top: 40px;
189}
190
191.fv .fv-link > a {
192  display: block;
193  text-align: center;
194  padding: 10px;
195  color: #FFF;
196}
197
198@media screen and (max-width: 1025px) {
199  .fv .fv-link {
200    left: -5%;
201  }
202}
203
204@media screen and (min-width: 600px) and (max-width: 1024px) {
205  .fv .fv-link {
206    top: 500px;
207    left: -5%;
208  }
209}
210
211/*# sourceMappingURL=style.css.map */

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！