teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

追記

2021/05/19 19:52

投稿

mitrasi
mitrasi

スコア49

title CHANGED
File without changes
body CHANGED
@@ -63,4 +63,41 @@
63
63
  ![widthを設定した場合](74d1f2dd39cd5bc3b8a070eb3162d3aa.png)
64
64
  OS:Windows
65
65
  エディタ:Brackets
66
- ブラウザ:クローム
66
+ ブラウザ:クローム
67
+
68
+
69
+ ### ご回答を受けて
70
+ 頂きましたご回答を参考に直してみましたところ、以下のようになり、fv-wrapper領域からはみ出してしまいました。
71
+ 領域外の影響範囲に関してはこちらの説明不足で大変失礼致しました。
72
+
73
+ 引き続きご教授頂けますと幸いです。
74
+ ■試したこと
75
+ fv-wrapper::beforeにheightを設定
76
+ overflow: hidden;を設定
77
+ ```css
78
+ html body .fv-wrapper {
79
+ position: relative;
80
+ width: 100%;
81
+ /* beforeにabsoluteを効かせるためwrapperにrelativeを設定する */
82
+ }
83
+
84
+ html body .fv-wrapper::before {
85
+ content: url(../img/sercle.png);
86
+ position: absolute;
87
+ right: -300px;
88
+ top: -500px;
89
+ -webkit-transform: scale(1.3);
90
+ transform: scale(1.3);
91
+ z-index: -1;
92
+ overflow: hidden;
93
+ /* position:absolute;
94
+ right:0; */
95
+ }
96
+ ```
97
+ 現在の状況は以下になります↓
98
+ ![現在の状況](0a6e6b49323c323eba2abd6d736ded1e.png)
99
+
100
+ サークル画像を収めたい理想の領域はコチラになります↓
101
+ ![イメージ説明](18d09d774d42804be3f0ee4205064b60.png)
102
+ ※収めたい領域が分かりやすいようbackground-color:yellowを一時的に設定しておりますが、デザインとは無関係です。
103
+ ※widthに関しては1000pxだと足りなかったので100%に変更させてもらっています。

2

追記

2021/05/19 19:52

投稿

mitrasi
mitrasi

スコア49

title CHANGED
File without changes
body CHANGED
@@ -60,6 +60,7 @@
60
60
 
61
61
  ### 補足情報(FW/ツールのバージョンなど)
62
62
  ![見本画像](451d896f53c48830b76b3cc90d913526.png)
63
+ ![widthを設定した場合](74d1f2dd39cd5bc3b8a070eb3162d3aa.png)
63
64
  OS:Windows
64
65
  エディタ:Brackets
65
66
  ブラウザ:クローム

1

画像の追加

2021/05/19 07:44

投稿

mitrasi
mitrasi

スコア49

title CHANGED
File without changes
body CHANGED
@@ -59,7 +59,7 @@
59
59
  →widthを外すと画像が見切れることはなくなったが、画像の大きさを調整したいのでこの方法ではだめ
60
60
 
61
61
  ### 補足情報(FW/ツールのバージョンなど)
62
-
62
+ ![見本画像](451d896f53c48830b76b3cc90d913526.png)
63
63
  OS:Windows
64
64
  エディタ:Brackets
65
65
  ブラウザ:クローム