Question

我有一个背景图像标签，希望它填满整个屏幕（包括我称为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;
}

Answer 1

问题是您的header.php的内容。因为您已将图片放在中，但随后添加了

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

删除这些行至少应解决表格不在图像中的问题

注册/登录容器将不会显示在背景图片中

1 个答案: