html - 注册/登录容器不会出现在背景图像内

问题描述

我有一个背景图像标签，我希望它填满整个屏幕（包括在我的标题后面，这是我调用的 header.php 文件，但是在这个图像内部，我想在它的中心放置一个注册/登录表单，目前表单只会出现在背景图片下方，请有人帮我看一下CSS并指导我正确的方向。

    <!DOCTYPE html>
    <html lang="en-GB">


    <body>
    <header class="clearfix dashboard" style="height: 100vh; background: url(img/loginImage.jpg) no-repeat center center; background-size: cover;">


<?php
  require 'header.php';
?>

  <div class="container-fluid" id="signup-container">  


      <div class="wrapper-main"> 


         <section class="form-container"> 
          <?php
          // Here we create an error message if the user made an error.
          if (isset($_GET["error"])) {
            if ($_GET["error"] == "emptyfields") {
              echo '<p class="signuperror">Fill in both fields!</p>';
            }
            else if ($_GET["error"] == "invaliduidmail") {
              echo '<p class="signuperror">Invalid username and email!</p>';
            }
            else if ($_GET["error"] == "invaliduid") {
              echo '<p class="signuperror">Invalid username!</p>';
            }
            else if ($_GET["error"] == "invalidmail") {
              echo '<p class="signuperror">Invalid email!</p>';
            }
          }

          ?>
          <form class="form-signup" action="includes/login.inc.php" method="post">
            <input type="text" name="mailuid" placeholder="Email/Username">
            <input type="password" name="pwd" placeholder="Password">
            <button type="submit" name="login-submit">Login</button>
          </form>



        <!--Here is the HTML login form.
        Notice that the "method" is set to "post" because the data we send is sensitive data.
        The "inputs" I decided to have in the form include username/e-mail and password. The user will be able to choose whether to login using e-mail or username. -->

          <a class="p-forgetpwd" href="reset-password.php">Forgot your password?</a>
        </section> 
       </div> 

   </div>  
  </header>
</body>
</html>


<?php
  require 'footer.php';
?>



.wrapper-main {
  width: 900px;
  margin: 0 auto;
}

/* For the Login/Signup pages */
.form-container {
  width: 40%;
  padding: 20px;
  border-radius: 10%;
  background-color: #FFF;
  margin-left: 270px;
}

标签： htmlcssresponsive-design

html - 注册/登录容器不会出现在背景图像内

问题描述

解决方案

推荐阅读