Html 背景图像左侧的窗体部分

我试图复制横幅部分的设计，其中有一个宽度为83.33%左右的背景图像和一个位于左侧背景图像正上方的表单部分。我可以显示背景图像上方的表单部分，也可以显示在左侧位置，但不完全是以下设计，其中约50-60%位于图像外部

要获得清晰的图片，请查看网站

以下是我的做法

<section class="hero-section">
   <section class="form">
     <h1>Search Form</h1>
     <form>
       <input type="text" name="search" />
       <input type="text" name="location" />
       <button>Submit</button>
     </form>
   </section>
  <section class="img-background">
    <div class="image">
    </div>
  </section>
</section>

.hero-section {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -12px;
  position: relative;
}

.form {
  position: absolute;
  left: 0;
  top: calc(50% - 2rem);
  transform: translateY(-50%);
  padding-left: 12px;
  margin-top: 0;
  z-index: 1;
  background: #fff;
  border-radius: .25rem;
  width: 33.33%;
  order: 2;
}

.img-background {
  width: 83.33%;
  border-radius: .25rem;
  margin: 0 12px;
  order: 1;
}

.image {
  background-image: url("https://ctfassets.imgix.net/vh7r69kgcki3/3Rp8TadHuB4736bDSYrMk7/d5585f00041d9b38458e7f8fd77f56ae/Web_150DPI-2018_11_19_WW_SF_1047_0989_1157_2385__1_.jpg?auto=format%20compress&fit=crop&q=50&w=2250&h=1266");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: auto;
  display: block;
  padding: 9em;
}

搜索表
提交
.英雄组{
显示器：flex；
柔性流：行换行；
边际：0-12px；
位置：相对位置；
}
.表格{
位置：绝对位置；
左：0；
顶部：calc（50%-2rem）；
转化：translateY（-50%）；
左侧填充：12px；
边际上限：0；
z指数：1；
背景：#fff；
边界半径：.25rem；
宽度：33.33%；
顺序：2；
}
.img背景{
宽度：83.33%；
边界半径：.25rem；
边际：0.12px；
顺序：1；
}
.形象{
背景图像：url（“https://ctfassets.imgix.net/vh7r69kgcki3/3Rp8TadHuB4736bDSYrMk7/d5585f00041d9b38458e7f8fd77f56ae/Web_150DPI-2018_11_19_WW_SF_1047_0989_1157_2385__1_.jpg?auto=format%20compress&fit=crop&q=50&w=2250&h=1266");
背景位置：50%50%；
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
高度：自动；
显示：块；
填充：9em；
}

---

对于解决方法，这里是

而不是在表单后的单独容器中有一个背景图像，为什么不将该图像作为外包装上的背景图像（英雄部分）？ 我将背景图像容器的宽度调整为35%，以便在左侧留出足够的空间，以便容纳表单

这是HTML

<section class="hero-section image">
   <div class="form">
     <h1>Search Form</h1>
     <form class="form-wrapper">
       <input type="text" name="search" />
       <input type="text" name="location" />
       <button>Submit</button>
     </form>
   </div>
</section>

---

感谢您的解决方案和时间。背景图像的单独容器，因为如果我想要图像滑块，我可以使用该容器。

.hero-section {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -12px;
  position: relative;
}

.form-wrapper {
  display: flex;
  flex-flow: row wrap;
  max-width: 200px;
  width: 100%;
}
input {
  margin: 10px 0;
}

.form {
  background: #fff;
  padding: 30px 30px 30px 10px;
  max-width: 150px;
  position: absolute;
  top: 30px;
  left: -60px;
}


.image {
  background-image: url("https://ctfassets.imgix.net/vh7r69kgcki3/3Rp8TadHuB4736bDSYrMk7/d5585f00041d9b38458e7f8fd77f56ae/Web_150DPI-2018_11_19_WW_SF_1047_0989_1157_2385__1_.jpg?auto=format%20compress&fit=crop&q=50&w=2250&h=1266");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 35%;
  height: auto;
  display: block;
  padding: 9em;
  margin: 0 auto;
  position: relative;
}