带有联系表格的背景图片位置

Question

这基本上是我正在研究的示例布局，

这是我的代码，在容器布局中看起来还不错，但是在流体布局中，它看起来很丑陋，我无法精确地自定义背景位置！

有什么办法可以更好地标记和样式表以进行响应吗？

最后： 我认为移动布局中没有背景图片

这是代码

Ex

.mgh-home-contact-form-area {
  margin: 120px 0;
}

.mgh-home-contact-form-area .row {
  background-image: url(https://i.imgur.com/bbUXVaF.jpg);
  background-repeat: no-repeat;
  background-size: 45% 90%;
  background-position: 0 -30%;
}

@media (max-width: 767px) {
  .mgh-home-contact-form-area .row {
    background: none;
  }
}

.mgh-home-contact-form form {
  background: #f7f9fd;
  padding: 25px;
}

.mgh-home-contact-form input,
.mgh-home-contact-form textarea {
  display: block;
  width: 100%;
  font-size: 14px;
  padding: 20px 10px;
  margin-bottom: 20px;
  border: none;
}

.mgh-home-contact-form input:hover,
.mgh-home-contact-form input:focus,
.mgh-home-contact-form textarea:hover,
.mgh-home-contact-form textarea:focus {
  outline: none;
}

.mgh-home-contact-form button {
  float: right;
  border: none;
  display: inline-block;
}

.mgh-home-contact-form-header h2 {
  color: #4FC1C4;
  font-family: "Proxima-Nova", sans-serif;
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 0;
}

.mgh-home-contact-form-header p {
  font-family: "Sarabun", sans-serif;
  color: #6d6d6d;
  font-size: 24px;
}

.mgh-featured-news-area {
  margin: 80px 0;
}

.mgh-featured-news-title {
  margin-bottom: 60px;
}

.mgh-featured-news-title h2 {
  color: #4FC1C4;
  font-family: "Proxima-Nova", sans-serif;
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 0;
}

.mgh-featured-news-title p {
  font-family: "Sarabun", sans-serif;
  font-size: 24px;
  color: #6d6d6d;
  line-height: 1.6em;
}

.mgh-featured-news-caption p {
  font-family: "Sarabun", sans-serif;
  color: #3c3c3c;
  font-size: 1.5em;
  text-transform: capitalize;
}

.mgh-featured-news-author span {
  font-family: "Sarabun", sans-serif;
  color: #6b6b6b;
  font-size: 1.5em;
  letter-spacing: 2px;
}

.mgh-viewall-btn-area {
  margin-top: 60px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<!--=============================
        Be Our Partner Area
    =============================-->
<div class="mgh-home-contact-form-area">
  <div class="container-fluid px-5-percent">
    <div class="row">
      <div class="col-lg-8 ml-auto">


        <div class="text-center mgh-home-contact-form-header mt-5">
          <h2>Be Our Partner</h2>
          <p>Lorem ipsum dolor sit amet consectetur.</p>
        </div>

        <div class="mgh-home-contact-form">
          <form action="">

            <input type="text" placeholder="Your organization name" required>
            <input type="text" name="" placeholder="Phone Number" required>
            <input type="text" name="" placeholder="your email" required>
            <textarea name="" cols="30" rows="10" placeholder="Your Message" required></textarea>

            <button class="mgh-btn" type="submit">SEND</button>

          </form>
        </div>