将表单浮动到图像上并向右下方

Question

您好 Stack Overflowians，我正在尝试将表单浮动在背景图像上，但我认为我做得不对。 这是我们公司的网关，经过多年的生产，我不得不重建它。 以下是我到目前为止所拥有的。 第一张图片是我的版本。 看看我是如何让背景图像居中的？ https://postimg.cc/nCmTfxVz现在零件工作良好。

接下来是旧站点，图像在左侧。 https://postimg.cc/jn76T6b9

不是要欺骗我们的客户，但他们现在真的很喜欢我们的旧网关，所以我试图让它的样式尽可能接近原始网关。 正如你所看到的，我已经成功地接近了它。 （新输入框上的圆角很好。）输入的位置对我来说也很好。 就是这样，我不相信我做对了，正如你在我的 HTML <div class="row" style="margin-top: -190px;">这就是我必须做的现在将整个表格向下推。

我在这里注意到（ 如何在图像上放置 Html 表单）大约在页面的一半处，@Scott 添加了padding-top: 120px; 到form{}代码。 我尝试添加他的 CSS ，但它将表格从图像中推下。 注意：我仍然需要在上面放置一个带有“注册”和“忘记密码”链接的 header，但我并不担心。 我会自己解决的。 如果你们能引导我朝着正确的方向前进，或者告诉我一个更好的方法来做到这一点，我将非常感激。 谢谢。

哦，这就是我在 Firefox 中将 go 进入响应模式时的样子，就像我在手机上查看它一样。 https://postimg.cc/qtq30ccL所以我添加了媒体查询的东西，你可以在 CSS 中看到。 现在我看起来像这样。 https://postimg.cc/m14q5G7D

哦，还有一件事。 这里还有一点要记住。 时不时地，我们会在页面顶部放置一个消息栏，上面写着“网关将在周末进行维护”。 或类似的东西。 我可能会在上面放一个 Bootstrap 横幅，因为它做起来非常简单快捷。 因此，当我这样做时，能够将所有东西都向下浮动会很好。 只是要记住一些额外的东西。 (-: 所以下面是我所有的代码。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
    <title>Gateway Reboot v.3.0</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <!--link rel="stylesheet" href="Contact-Form-Clean.css"/-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
    body{
      font-family: 'Roboto Condensed', Arial, sans-serif;
    }
    .coolbox { /* this is a hold-over from the old web application */
      display: block;
      font-family: 'Roboto Condensed', Arial, sans-serif;
      font-size: 12px;/* was 12.87px */
      line-height: 16px;
      border: 2px #708090 solid;
      height: 22px;
      width: 155px;
      padding-left: 6px;/* because Bootstrap was putting too much padding on the left */
    }
    label{
      margin-bottom: 0;
    }
    form{
      margin-left: 200px;
    }
    @media only screen and (min-width: 768px) {
      form{
        margin-left: 25%;
      }
      /*img {
        opacity: 0.6;
      }*/
    }
    @media only screen and (max-width: 600px) {
      form{
        margin-left: 25%;
        margin-top: 15%;
      }
      img {
        opacity: 0.1;
      }
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
              <img src="bigbackKey.png" class="img-fluid d-block mx-auto" alt="Sample Image" />
                <!--section class="contact-clean"-->
                 <div class="row" style="margin-top: -190px;"><!--Just doing this for now to push the "form" row down. I know it's probably not the right way to do it.--> 
                  <div class="col-md-6"></div>
                  <div class="col-md-6">
                    <form method="post">
                        <div class="form-group">
                          <label for="username">Username</label>
                          <input type="text" class="form-control coolbox" id="username" name="username" />
                        <!--/div-->
                        <!--By combining these 2 divs, it removed a big gap between the username box/label and password box/label.-->
                        <!--div class="form-group"-->
                          <label for="password">Password</label>
                          <input type="password" class="form-control coolbox" id="password" name="password" />
                        </div>
                        <div class="form-group"><button class="coolbox" type="submit">Login</button></div>
                    </form>
                  </div>
                 </div>
                <!--/section-->
            </div>
        </div>
    </div>
</body>
</html>