bootstrapのフォームを白枠に収めたい

Question

bootstrap,html,cssでWEBサイトの模写をしていて、bootstrapで作ったフォームのサイズと位置を調整して、白枠の位置に収めたいのですが、やり方が分かりません。意見をお願いします。

<div class="background-image">
  

      <div class="row justify-content-end">
        <div class="border col-5">
          <br>
          <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ</h1>
          <h2 class="size1"><b>宿泊施設の内容を記入</b></h2>
          <br>
          <div class="row clear_form">
            <div class="col-md">
              <form>
                <div class="form-group">
                  <input type="text" class="form-control">
                  <div class="d-flex">
                    <select class="form-control w-50">
                      <option>まるまる貸切</option>
                      <option>個室</option>
                      <option>シェアルーム</option>
                    </select>
                  <select class="form-control w-50">
                      <option>ゲスト1人</option>
                      <option>ゲスト2人</option>
                      <option>ゲスト3人</option>
                      <option>ゲスト4人</option>
                      <option>ゲスト5人</option>
                      <option>ゲスト6人</option>
                      <option>ゲスト7人</option>
                      <option>ゲスト8人</option>
                      <option>ゲスト9人</option>
                      <option>ゲスト10人</option>
                      <option>ゲスト11人</option>
                      <option>ゲスト12人</option>
                      <option>ゲスト13人</option>
                      <option>ゲスト14人</option>
                      <option>ゲスト15人</option>
                      <option>ゲスト16人</option>
                  </select> 
                </div> 
                 <button type="submit" class="btn btn-danger ">はじめる</button>  
              </form>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>

.background-image{
  background-image: url(../画像/airbnb5.png);
  background-repeat: no-repeat;
  background-position: center center;
  padding-bottom:20%
}

Answer 1

画像を白抜きしてそこに収めようとするのが間違いです。
背景白のフォームを作って位置を調整すれば簡単に済む話です。

Comments

[writegrint]

つまり、フォームを動かすのではなく画像を動かすという事でしょうか。

[m.ts10806]

どこにもそんなことは書いてないです。
「画像の白い位置にフォームを動かそうとするのではなく、背景白のフォームを任意の位置に配置する」
と書いています。
つまり、画像にわざわざ白い箇所を設けるのは悪手だと言うことです。

[m.ts10806]

paddingやmarginは全てのブラウザで一律ではないです。
「画像の白い箇所を設けてそこに要素を置く」とちょっとしたことでずれてはみ出します。
レスポンシブ対応にも向いていません。
それなら画像は何も加工していない普通の画像を使って、フォーム内の背景を白くすればブラウザによってはみ出るなんてことはなく、フォームの位置調整だけ済みます。
（前の質問で背景画像について言及してたけど無視されたままここまで来てしまったのが間違い）

[writegrint]

なるほど、レスポンシブ対応にはフォームの背景を白くする方が便利というわけですね。
元々、白く塗った部分はそのサイトのフォームになっていて、それを自分でまねて、なんとか同じ位置に当てはめようと、わかりやすく白で塗っていました。

[m.ts10806]

レスポンシブ関係なく画像自体を加工することは普通やりません。と書いてます。
そのサイトとやらも画像自体は加工されてないんじゃないですかね。提示されてないので確かめようがないですけど