PHP эхо-выход идет ниже фонового изображения

Question

Здравствуйте, я много искал, но не могу найти ответ на этот вопрос. У меня есть php регистрационная форма, которая отлично работает. Единственная проблема заключается в том, что после того, как я добавил фоновое изображение, любое сообщение об ошибке полей, не заполненных должным образом, и даже успешное сообщение go в нижней части фонового изображения и, таким образом, выпадают из экрана. Я не могу понять, почему ... Я попытался дать Id для div и отформатировать его в CSS следующим образом:

#regConfirm {
    text-align:center;
    top: 50%;
} 

, но это не сработает. Я чувствую, что что-то упустил ...

<?php # DISPLAY COMPLETE REGISTRATION PAGE.

# Set page title and display header section.
$page_title = 'Register' ;
include ( 'includes/log_reg_header.html' ) ;

# Check form submitted.
if ( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' )
{
  # Connect to the database.
    require ('..\connect_db.php');

  # Initialize an error array.
  $errors = array();

  # Add title
  $ti = $_POST[ 'Title' ];

  # Check for a first name.
  if ( empty( $_POST[ 'first_name' ] ) ){ 
      $errors[] = 'Enter your first name' ; }
  else
  { $fn = mysqli_real_escape_string( $dbc, trim( $_POST[ 'first_name' ] ) ) ; }

  # Check for a last name.
  if (empty( $_POST[ 'last_name' ] ) )
  { $errors[] = 'Enter your last name' ; }
  else
  { $ln = mysqli_real_escape_string( $dbc, trim( $_POST[ 'last_name' ] ) ) ; }

  # Check for the address.
  if (empty( $_POST[ 'street_address' ] ) )
  { $errors[] = 'Enter your street address' ; }
  else
  { $sa = mysqli_real_escape_string( $dbc, trim( $_POST[ 'street_address' ] ) ) ; }

  # Check for the post code.
  if (empty( $_POST[ 'post_code' ] ) )
  { $errors[] = 'Enter your post code' ; }
  else
  { $pc = mysqli_real_escape_string( $dbc, trim( $_POST[ 'post_code' ] ) ) ; }

  # Check for the State.
  if (empty( $_POST[ 'State' ] ) )
  { $errors[] = 'Enter your State' ; }
  else
  { $st = mysqli_real_escape_string( $dbc, trim( $_POST[ 'State' ] ) ) ; }

  # Check for the Country.
  if (empty( $_POST[ 'Country' ] ) )
  { $errors[] = 'Enter your Country' ; }
  else
  { $co = mysqli_real_escape_string( $dbc, trim( $_POST[ 'Country' ] ) ) ; }

  # Check for an email address:
  if ( empty( $_POST[ 'email' ] ) )
  { $errors[] = 'Enter your email address'; }
  else
  { $e = mysqli_real_escape_string( $dbc, trim( $_POST[ 'email' ] ) ) ; }

  # Insert birth date:
  $bd = $_POST[ 'birth_date' ];

  # Check for a password and matching input passwords.
  if ( !empty($_POST[ 'pass1' ] ) )
  {
    if ( $_POST[ 'pass1' ] != $_POST[ 'pass2' ] )
    { $errors[] = 'Passwords do not match' ; }
    else
    { $p = mysqli_real_escape_string( $dbc, trim( $_POST[ 'pass1' ] ) ) ; }
  }
  else { $errors[] = 'Enter your password' ; }

  # Check if email address already registered.
  if ( empty( $errors ) )
  {
    $q = "SELECT user_id FROM users WHERE email='$e'" ;
    $r = @mysqli_query ( $dbc, $q ) ;
    if ( mysqli_num_rows( $r ) != 0 ) $errors[] = 'Email address already registered. <a href="login.php">Login</a>' ;
  }

  # On success register user inserting into 'users' database table.
  if ( empty( $errors ) ) 
  {
    $q = "INSERT INTO users (Title, first_name, last_name, street_address, post_code, State, Country, email, birth_date, pass, reg_date) VALUES ('$ti', '$fn', '$ln', '$sa', '$pc', '$st', '$co', '$e', '$bd', SHA1('$p'), NOW() )";
    $r = @mysqli_query ( $dbc, $q ) ;
    if ($r){ ?> 
        <section id="regConfirm"><h2>Registered!</h2><p>You can now <a href="login.php">Login</a></p></section>
    <?php ; }
    # Close database connection.
    mysqli_close($dbc); 

    exit();
  }
  # Or report errors.
  else 
  {
    echo '<h1>Error!</h1><p id="err_msg">The following error(s) occurred:<br>' ;
    foreach ( $errors as $msg )
    { echo " - $msg<br>" ; }
    echo 'Please fill in details again.</p>';
    # Close database connection.
    mysqli_close( $dbc );
  }  
}
?>
<!-- Display body section with sticky form. -->
<div id="login"><h3 style="color:#2C1E04";>Register</h3>
<form id="loginx" action="register.php" method="POST">
    <select name="Title"> 
        <option value="Mr">Mr</option>
        <option value="Ms">Ms</option>   
    </select><br>
    <?php if (isset($_POST['Title'])) echo $_POST['Title']; ?>
    <label>First Name:</label> <input type="text" name="first_name" size="54" placeholder="First name" value="
<?php if (isset($_POST['first_name'])) echo $_POST['first_name']; ?>" required><br>
    <label>Last Name:</label> <input type="text" name="last_name" size="54" placeholder="Last name" value="
<?php if (isset($_POST['last_name'])) echo $_POST['last_name'];?>" required><br>
    <label>Birth date:</label> <input type="date" name="birth_date" value="
<?php if (isset($_POST['birth_date'])) echo $_POST['birth_date']; ?>" required><br>
    <label>Street Address:</label> <input type="text" name="street_address" size="25" placeholder="Street Address" value="
<?php if (isset($_POST['street_address'])) echo $_POST['street_address']; ?>" required> <br>
    <label>Post Code:</label> <input type="text" name="post_code" size="25" placeholder="Post Code" value="
<?php if (isset($_POST['post_code'])) echo $_POST['post_code'];?>" required><br>
    <label>State:</label> <input type="text" name="State" size="25" placeholder="State" value="
<?php if (isset($_POST['State'])) echo $_POST['State'];?>" required><br>
    <label>Country:</label> <input type="text" name="Country" size="25" placeholder="Country" value="
<?php if (isset($_POST['Country'])) echo $_POST['Country'];?>" required><br>    
    <label>Email Address:</label> <input type="email" name="email" size="54" placeholder="Enter a valid email address" value="
<?php if (isset($_POST['email'])) echo $_POST['email']; ?>" required><br><br>
    <label>Password:</label> <input type="password" name="pass1" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}" title="Must contain 8 to 15 characters, lowercase and uppercase letters, numbers and special characters" size="15" placeholder="Your password" value="
<?php if (isset($_POST['pass1'])) echo $_POST['pass1']; ?>" required>
    <label>Retype Password:</label> <input type="password" name="pass2" size="16" placeholder="Re-type your password" value="
<?php if (isset($_POST['pass2'])) echo $_POST['pass2']; ?>" required><br>

    <input type="submit" value="Register">
</form></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/bootstrap.min.js" charset="utf-8"></script>
</body>

</html>

Answer 1

это может помочь другим, поэтому я заканчиваю решение ... также я забыл дать в верхней части раздела тела в html верхний и нижний отступы. Поскольку фиксированные элементы, такие как navbar, не занимают места.

Answer 2

попробуйте добавить это на css: position: absolute;